phlex_kit 0.2.0

data/app/javascript/phlex_kit/controllers/data_table_search_controller.js

@@ -0,0 +1,67 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Ported from ruby_ui's data-table-search controller (Stimulus-only upstream),
+// identifiers renamed ruby-ui → phlex-kit. Debounces form submits and restores
+// focus/caret across the Turbo Frame swap.
+
+// Module-level map survives controller disconnect/connect across Turbo Frame swaps.
+// Keyed by the search form's action URL.
+const PENDING_FOCUS = new Map();
+
+// Connects to data-controller="phlex-kit--data-table-search"
+export default class extends Controller {
+  static values = { delay: { type: Number, default: 300 } };
+
+  connect() {
+    this.timer = null;
+    this.beforeFrameRender = this.captureBeforeRender.bind(this);
+    document.addEventListener("turbo:before-frame-render", this.beforeFrameRender);
+    // New instance after a Turbo Frame swap — check for captured state.
+    this.restoreIfPending();
+  }
+
+  disconnect() {
+    clearTimeout(this.timer);
+    document.removeEventListener("turbo:before-frame-render", this.beforeFrameRender);
+  }
+
+  submit(event) {
+    if (event && event.type !== "input") return;
+    clearTimeout(this.timer);
+    if (this.delayValue <= 0) return;
+    this.timer = setTimeout(() => this.element.requestSubmit(), this.delayValue);
+  }
+
+  captureBeforeRender() {
+    const input = this.input();
+    if (!input || document.activeElement !== input) return;
+    PENDING_FOCUS.set(this.key(), {
+      selectionStart: input.selectionStart,
+      selectionEnd: input.selectionEnd
+    });
+  }
+
+  restoreIfPending() {
+    const state = PENDING_FOCUS.get(this.key());
+    if (!state) return;
+    PENDING_FOCUS.delete(this.key());
+    const input = this.input();
+    if (!input) return;
+    input.focus();
+    const len = input.value.length;
+    try {
+      input.setSelectionRange(
+        Math.min(state.selectionStart ?? len, len),
+        Math.min(state.selectionEnd ?? len, len)
+      );
+    } catch (e) {}
+  }
+
+  input() {
+    return this.element.querySelector('input[type="search"]');
+  }
+
+  key() {
+    return this.element.action || "_";
+  }
+}

data/app/javascript/phlex_kit/controllers/dialog_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="phlex-kit--dialog". Ported from ruby_ui.
+export default class extends Controller {
+  static targets = ["dialog"]
+  static values = { open: { type: Boolean, default: false } }
+
+  connect() {
+    this.dialogTarget.addEventListener("close", this.handleClose)
+    if (this.openValue) this.open()
+  }
+  disconnect() {
+    this.dialogTarget.removeEventListener("close", this.handleClose)
+    document.body.style.removeProperty("overflow")
+  }
+  open(e) { e?.preventDefault(); this.dialogTarget.showModal(); document.body.style.overflow = "hidden" }
+  dismiss() { this.dialogTarget.close() }
+  backdropClick(e) { if (e.target === this.dialogTarget) this.dismiss() }
+  handleClose = () => { document.body.style.removeProperty("overflow") }
+}

data/app/javascript/phlex_kit/controllers/dropdown_menu_controller.js

@@ -0,0 +1,106 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Ported from ruby_ui's phlex-kit--dropdown-menu controller. The ONE change from
+// upstream: the @floating-ui/dom dependency is removed — the panel is positioned
+// with plain CSS (.ui-dropdown-menu-content { position:absolute }), so this app
+// needs no npm/build step. Toggle, click-outside, and arrow/enter keyboard nav
+// are unchanged.
+export default class extends Controller {
+  static targets = ["trigger", "content", "menuItem"];
+  static values = { open: { type: Boolean, default: false } };
+
+  connect() {
+    this.boundHandleKeydown = this.#handleKeydown.bind(this);
+    this.selectedIndex = -1;
+  }
+
+  disconnect() {
+    this.#removeEventListeners();
+  }
+
+  onClickOutside(event) {
+    if (!this.openValue) return;
+    if (this.element.contains(event.target)) return;
+
+    event.preventDefault();
+    this.close();
+  }
+
+  toggle() {
+    this.contentTarget.classList.contains("hidden") ? this.#open() : this.close();
+  }
+
+  #open() {
+    this.openValue = true;
+    this.#deselectAll();
+    this.#addEventListeners();
+    // Lift the open menu above siblings (the container has no static z-index).
+    this.element.style.zIndex = "50";
+    this.contentTarget.classList.remove("hidden");
+  }
+
+  close() {
+    this.openValue = false;
+    this.#removeEventListeners();
+    this.element.style.zIndex = "";
+    this.contentTarget.classList.add("hidden");
+  }
+
+  #handleKeydown(e) {
+    if (this.menuItemTargets.length === 0) return;
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      this.#updateSelectedItem(1);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      this.#updateSelectedItem(-1);
+    } else if (e.key === "Enter" && this.selectedIndex !== -1) {
+      e.preventDefault();
+      this.menuItemTargets[this.selectedIndex].click();
+    } else if (e.key === "Escape") {
+      this.close();
+    }
+  }
+
+  #updateSelectedItem(direction) {
+    this.menuItemTargets.forEach((item, index) => {
+      if (item.getAttribute("aria-selected") === "true") this.selectedIndex = index;
+    });
+
+    if (this.selectedIndex >= 0) {
+      this.#toggleAriaSelected(this.menuItemTargets[this.selectedIndex], false);
+    }
+
+    this.selectedIndex += direction;
+
+    if (this.selectedIndex < 0) {
+      this.selectedIndex = this.menuItemTargets.length - 1;
+    } else if (this.selectedIndex >= this.menuItemTargets.length) {
+      this.selectedIndex = 0;
+    }
+
+    this.#toggleAriaSelected(this.menuItemTargets[this.selectedIndex], true);
+  }
+
+  #toggleAriaSelected(element, isSelected) {
+    if (isSelected) {
+      element.setAttribute("aria-selected", "true");
+    } else {
+      element.removeAttribute("aria-selected");
+    }
+  }
+
+  #deselectAll() {
+    this.menuItemTargets.forEach((item) => this.#toggleAriaSelected(item, false));
+    this.selectedIndex = -1;
+  }
+
+  #addEventListeners() {
+    document.addEventListener("keydown", this.boundHandleKeydown);
+  }
+
+  #removeEventListeners() {
+    document.removeEventListener("keydown", this.boundHandleKeydown);
+  }
+}

data/app/javascript/phlex_kit/controllers/form_field_controller.js

@@ -0,0 +1,69 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Ported from ruby_ui's form-field controller (Stimulus-only upstream),
+// identifiers renamed ruby-ui → phlex-kit and the Tailwind hidden class swapped
+// for .pk-hidden. Validation stays quiet until the control first goes invalid
+// (or the error target renders with server content); after that the message
+// live-updates on every input/change. Per-constraint messages come from
+// data-* on the input (data-value-missing, data-type-mismatch, …), falling
+// back to the browser's validationMessage.
+// Connects to data-controller="phlex-kit--form-field"
+export default class extends Controller {
+  static targets = ["input", "error"];
+  static values = { shouldValidate: false };
+
+  connect() {
+    if (this.hasErrorTarget) {
+      if (this.errorTarget.textContent) {
+        this.shouldValidateValue = true;
+      } else {
+        this.errorTarget.classList.add("pk-hidden");
+      }
+    }
+  }
+
+  onInvalid(error) {
+    error.preventDefault();
+
+    this.shouldValidateValue = true;
+    this.#setErrorMessage();
+  }
+
+  onInput() {
+    this.#setErrorMessage();
+  }
+
+  onChange() {
+    this.#setErrorMessage();
+  }
+
+  #setErrorMessage() {
+    if (!this.shouldValidateValue) return;
+
+    if (this.inputTarget.validity.valid) {
+      this.errorTarget.textContent = "";
+      this.errorTarget.classList.add("pk-hidden");
+    } else {
+      this.errorTarget.textContent = this.#getValidationMessage();
+      this.errorTarget.classList.remove("pk-hidden");
+    }
+  }
+
+  #getValidationMessage() {
+    let errorMessage;
+
+    const { validity, dataset, validationMessage } = this.inputTarget;
+
+    if (validity.tooLong) errorMessage = dataset.tooLong;
+    if (validity.tooShort) errorMessage = dataset.tooShort;
+    if (validity.badInput) errorMessage = dataset.badInput;
+    if (validity.typeMismatch) errorMessage = dataset.typeMismatch;
+    if (validity.stepMismatch) errorMessage = dataset.stepMismatch;
+    if (validity.valueMissing) errorMessage = dataset.valueMissing;
+    if (validity.rangeOverflow) errorMessage = dataset.rangeOverflow;
+    if (validity.rangeUnderflow) errorMessage = dataset.rangeUnderflow;
+    if (validity.patternMismatch) errorMessage = dataset.patternMismatch;
+
+    return errorMessage || validationMessage;
+  }
+}

data/app/javascript/phlex_kit/controllers/hover_card_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="phlex-kit--hover-card". Show on hover/focus with a
+// small open/close delay. CSS positions the card under the trigger.
+export default class extends Controller {
+  static targets = ["content"]
+  static values = { openDelay: { type: Number, default: 200 }, closeDelay: { type: Number, default: 200 } }
+  show() { clearTimeout(this.t); this.t = setTimeout(() => { this.contentTarget.classList.remove("pk-hidden"); this.contentTarget.dataset.state = "open" }, this.openDelayValue) }
+  hide() { clearTimeout(this.t); this.t = setTimeout(() => { this.contentTarget.classList.add("pk-hidden"); this.contentTarget.dataset.state = "closed" }, this.closeDelayValue) }
+  disconnect() { clearTimeout(this.t) }
+}

data/app/javascript/phlex_kit/controllers/index.js

@@ -0,0 +1,87 @@
+// Register PhlexKit's Stimulus controllers under their phlex-kit--* identifiers.
+// Call once from your app's Stimulus entrypoint:
+//
+//   import { Application } from "@hotwired/stimulus"
+//   import { registerPhlexKitControllers } from "phlex_kit/controllers"
+//   const application = Application.start()
+//   registerPhlexKitControllers(application)
+//
+// The identifiers here MUST match the data-controller names emitted by the
+// components (e.g. phlex-kit--dropdown-menu).
+import AccordionController from "phlex_kit/controllers/accordion_controller"
+import AlertDialogController from "phlex_kit/controllers/alert_dialog_controller"
+import AvatarController from "phlex_kit/controllers/avatar_controller"
+import CalendarController from "phlex_kit/controllers/calendar_controller"
+import CalendarInputController from "phlex_kit/controllers/calendar_input_controller"
+import CarouselController from "phlex_kit/controllers/carousel_controller"
+import ChartController from "phlex_kit/controllers/chart_controller"
+import ClipboardController from "phlex_kit/controllers/clipboard_controller"
+import CollapsibleController from "phlex_kit/controllers/collapsible_controller"
+import ComboboxController from "phlex_kit/controllers/combobox_controller"
+import CommandController from "phlex_kit/controllers/command_controller"
+import CommandDialogController from "phlex_kit/controllers/command_dialog_controller"
+import ContextMenuController from "phlex_kit/controllers/context_menu_controller"
+import DataTableController from "phlex_kit/controllers/data_table_controller"
+import DataTableColumnVisibilityController from "phlex_kit/controllers/data_table_column_visibility_controller"
+import DataTableSearchController from "phlex_kit/controllers/data_table_search_controller"
+import DialogController from "phlex_kit/controllers/dialog_controller"
+import DropdownMenuController from "phlex_kit/controllers/dropdown_menu_controller"
+import FormFieldController from "phlex_kit/controllers/form_field_controller"
+import HoverCardController from "phlex_kit/controllers/hover_card_controller"
+import InputOtpController from "phlex_kit/controllers/input_otp_controller"
+import MaskedInputController from "phlex_kit/controllers/masked_input_controller"
+import MenubarController from "phlex_kit/controllers/menubar_controller"
+import MessageScrollerController from "phlex_kit/controllers/message_scroller_controller"
+import PopoverController from "phlex_kit/controllers/popover_controller"
+import ResizableController from "phlex_kit/controllers/resizable_controller"
+import SelectController from "phlex_kit/controllers/select_controller"
+import SelectItemController from "phlex_kit/controllers/select_item_controller"
+import SheetController from "phlex_kit/controllers/sheet_controller"
+import SheetContentController from "phlex_kit/controllers/sheet_content_controller"
+import SliderController from "phlex_kit/controllers/slider_controller"
+import TabsController from "phlex_kit/controllers/tabs_controller"
+import ThemeToggleController from "phlex_kit/controllers/theme_toggle_controller"
+import ToastController from "phlex_kit/controllers/toast_controller"
+import ToasterController from "phlex_kit/controllers/toaster_controller"
+import ToggleController from "phlex_kit/controllers/toggle_controller"
+import ToggleGroupController from "phlex_kit/controllers/toggle_group_controller"
+
+export function registerPhlexKitControllers(application) {
+  application.register("phlex-kit--accordion", AccordionController)
+  application.register("phlex-kit--alert-dialog", AlertDialogController)
+  application.register("phlex-kit--avatar", AvatarController)
+  application.register("phlex-kit--calendar", CalendarController)
+  application.register("phlex-kit--calendar-input", CalendarInputController)
+  application.register("phlex-kit--carousel", CarouselController)
+  application.register("phlex-kit--chart", ChartController)
+  application.register("phlex-kit--clipboard", ClipboardController)
+  application.register("phlex-kit--collapsible", CollapsibleController)
+  application.register("phlex-kit--combobox", ComboboxController)
+  application.register("phlex-kit--command", CommandController)
+  application.register("phlex-kit--command-dialog", CommandDialogController)
+  application.register("phlex-kit--context-menu", ContextMenuController)
+  application.register("phlex-kit--data-table", DataTableController)
+  application.register("phlex-kit--data-table-column-visibility", DataTableColumnVisibilityController)
+  application.register("phlex-kit--data-table-search", DataTableSearchController)
+  application.register("phlex-kit--dialog", DialogController)
+  application.register("phlex-kit--dropdown-menu", DropdownMenuController)
+  application.register("phlex-kit--form-field", FormFieldController)
+  application.register("phlex-kit--hover-card", HoverCardController)
+  application.register("phlex-kit--input-otp", InputOtpController)
+  application.register("phlex-kit--masked-input", MaskedInputController)
+  application.register("phlex-kit--menubar", MenubarController)
+  application.register("phlex-kit--message-scroller", MessageScrollerController)
+  application.register("phlex-kit--popover", PopoverController)
+  application.register("phlex-kit--resizable", ResizableController)
+  application.register("phlex-kit--select", SelectController)
+  application.register("phlex-kit--select-item", SelectItemController)
+  application.register("phlex-kit--sheet", SheetController)
+  application.register("phlex-kit--sheet-content", SheetContentController)
+  application.register("phlex-kit--slider", SliderController)
+  application.register("phlex-kit--tabs", TabsController)
+  application.register("phlex-kit--theme-toggle", ThemeToggleController)
+  application.register("phlex-kit--toast", ToastController)
+  application.register("phlex-kit--toaster", ToasterController)
+  application.register("phlex-kit--toggle", ToggleController)
+  application.register("phlex-kit--toggle-group", ToggleGroupController)
+}

data/app/javascript/phlex_kit/controllers/input_otp_controller.js

@@ -0,0 +1,66 @@
+import { Controller } from "@hotwired/stimulus"
+
+// PhlexKit's stand-in for the input-otp lib behind shadcn's InputOTP: per-slot
+// single-character inputs with auto-advance, backspace retreat, arrow
+// movement and paste distribution; the hidden value target carries the joined
+// code for the form.
+// Connects to data-controller="phlex-kit--input-otp"
+export default class extends Controller {
+  static targets = ["slot", "value"]
+  static values = { length: Number }
+
+  connect() {
+    this.syncValue()
+  }
+
+  onInput(e) {
+    const slot = e.target
+    slot.value = slot.value.replace(/\s/g, "").slice(-1)
+    if (slot.value) this.focusSlot(this.slotTargets.indexOf(slot) + 1)
+    this.syncValue()
+  }
+
+  onKeydown(e) {
+    const index = this.slotTargets.indexOf(e.target)
+    if (e.key === "Backspace" && !e.target.value && index > 0) {
+      e.preventDefault()
+      const prev = this.slotTargets[index - 1]
+      prev.value = ""
+      prev.focus()
+      this.syncValue()
+    } else if (e.key === "ArrowLeft" && index > 0) {
+      e.preventDefault()
+      this.focusSlot(index - 1)
+    } else if (e.key === "ArrowRight") {
+      e.preventDefault()
+      this.focusSlot(index + 1)
+    }
+  }
+
+  onPaste(e) {
+    e.preventDefault()
+    const chars = (e.clipboardData?.getData("text") || "").replace(/\s/g, "").split("")
+    if (!chars.length) return
+    const start = this.slotTargets.indexOf(e.target)
+    this.slotTargets.slice(start).forEach((slot, i) => { if (chars[i] != null) slot.value = chars[i] })
+    this.focusSlot(Math.min(start + chars.length, this.slotTargets.length - 1))
+    this.syncValue()
+  }
+
+  onFocus(e) {
+    e.target.select()
+  }
+
+  focusSlot(index) {
+    const slot = this.slotTargets[Math.max(0, Math.min(index, this.slotTargets.length - 1))]
+    slot?.focus()
+  }
+
+  syncValue() {
+    if (!this.hasValueTarget) return
+    const code = this.slotTargets.map((slot) => slot.value).join("")
+    if (this.valueTarget.value === code) return
+    this.valueTarget.value = code
+    this.valueTarget.dispatchEvent(new Event("change", { bubbles: true }))
+  }
+}

data/app/javascript/phlex_kit/controllers/masked_input_controller.js

@@ -0,0 +1,26 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="phlex-kit--masked-input". Lightweight, dependency-
+// free mask driven by a data-mask pattern (# = digit, A = letter, * = any). Swap
+// in `maska` (ruby_ui's choice) here if you need a fuller mask engine.
+export default class extends Controller {
+  connect() {
+    this.mask = this.element.getAttribute("data-mask") || ""
+    if (!this.mask) return
+    this.onInput = () => this.apply()
+    this.element.addEventListener("input", this.onInput)
+  }
+  disconnect() { if (this.onInput) this.element.removeEventListener("input", this.onInput) }
+  apply() {
+    const raw = this.element.value.replace(/[^0-9A-Za-z]/g, "")
+    let out = "", i = 0
+    for (const t of this.mask) {
+      if (i >= raw.length) break
+      if (t === "#") { if (/\d/.test(raw[i])) out += raw[i++]; else break }
+      else if (t === "A") { if (/[A-Za-z]/.test(raw[i])) out += raw[i++]; else break }
+      else if (t === "*") { out += raw[i++] }
+      else { out += t; if (raw[i] === t) i++ }
+    }
+    this.element.value = out
+  }
+}

data/app/javascript/phlex_kit/controllers/menubar_controller.js

@@ -0,0 +1,43 @@
+import { Controller } from "@hotwired/stimulus"
+
+// PhlexKit's stand-in for Radix behind shadcn's Menubar and NavigationMenu:
+// click (or hover, for nav menus) opens a menu's panel; while one is open,
+// hovering a sibling trigger switches to it; Escape/outside/item click closes.
+// Connects to data-controller="phlex-kit--menubar"
+export default class extends Controller {
+  static targets = ["menu"]
+
+  toggle(e) {
+    const menu = e.currentTarget.closest("[data-phlex-kit--menubar-target=\"menu\"]")
+    this.openMenu === menu ? this.close() : this.show(menu)
+  }
+
+  // Hover: switches between menus while one is open (menubar), or opens
+  // directly when the bar declares data-hover-open (navigation menu).
+  switch(e) {
+    const menu = e.currentTarget.closest("[data-phlex-kit--menubar-target=\"menu\"]")
+    if (this.element.dataset.hoverOpen !== undefined) return this.show(menu)
+    if (this.openMenu && this.openMenu !== menu) this.show(menu)
+  }
+
+  show(menu) {
+    if (this.openMenu === menu) return
+    this.close()
+    menu.querySelector("[role=\"menu\"], .pk-menubar-content, .pk-navigation-menu-content")?.classList.remove("pk-hidden")
+    menu.querySelector("[aria-expanded]")?.setAttribute("aria-expanded", "true")
+    this.openMenu = menu
+  }
+
+  close() {
+    const menu = this.openMenu
+    if (!menu) return
+    menu.querySelector("[role=\"menu\"], .pk-menubar-content, .pk-navigation-menu-content")?.classList.add("pk-hidden")
+    menu.querySelector("[aria-expanded]")?.setAttribute("aria-expanded", "false")
+    this.openMenu = null
+  }
+
+  onClickOutside(e) {
+    if (this.element.contains(e.target)) return
+    this.close()
+  }
+}