kiso 0.1.0.pre → 0.2.0.pre

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

@@ -0,0 +1,42 @@
+import KisoComboboxController from "./combobox_controller.js"
+import KisoCommandController from "./command_controller.js"
+import KisoCommandDialogController from "./command_dialog_controller.js"
+import KisoDropdownMenuController from "./dropdown_menu_controller.js"
+import KisoInputOtpController from "./input_otp_controller.js"
+import KisoPopoverController from "./popover_controller.js"
+import KisoSelectController from "./select_controller.js"
+import KisoSidebarController from "./sidebar_controller.js"
+import KisoThemeController from "./theme_controller.js"
+import KisoToggleController from "./toggle_controller.js"
+import KisoToggleGroupController from "./toggle_group_controller.js"
+
+const KisoUi = {
+  start(application) {
+    application.register("kiso--combobox", KisoComboboxController)
+    application.register("kiso--command", KisoCommandController)
+    application.register("kiso--command-dialog", KisoCommandDialogController)
+    application.register("kiso--dropdown-menu", KisoDropdownMenuController)
+    application.register("kiso--input-otp", KisoInputOtpController)
+    application.register("kiso--popover", KisoPopoverController)
+    application.register("kiso--select", KisoSelectController)
+    application.register("kiso--sidebar", KisoSidebarController)
+    application.register("kiso--theme", KisoThemeController)
+    application.register("kiso--toggle", KisoToggleController)
+    application.register("kiso--toggle-group", KisoToggleGroupController)
+  },
+}
+
+export default KisoUi
+export {
+  KisoComboboxController,
+  KisoCommandController,
+  KisoCommandDialogController,
+  KisoDropdownMenuController,
+  KisoInputOtpController,
+  KisoPopoverController,
+  KisoSelectController,
+  KisoSidebarController,
+  KisoThemeController,
+  KisoToggleController,
+  KisoToggleGroupController,
+}

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

@@ -0,0 +1,195 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Manages a one-time password input with individual visual character slots.
+ *
+ * A single transparent `<input>` overlays the visual slots. The browser handles
+ * all native input behavior (focus, paste, mobile autofill). This controller
+ * distributes the input value to slot elements and tracks the active slot via
+ * `selectionStart`.
+ *
+ * @example
+ *   <div data-controller="kiso--input-otp"
+ *        data-kiso--input-otp-length-value="6"
+ *        data-kiso--input-otp-pattern-value="\\d">
+ *     <input data-kiso--input-otp-target="input"
+ *            type="text" maxlength="6" autocomplete="one-time-code"
+ *            class="absolute inset-0 z-10 w-full h-full opacity-0">
+ *     <div data-slot="input-otp-group">
+ *       <div data-kiso--input-otp-target="slot" data-slot="input-otp-slot">
+ *         <span data-slot="input-otp-slot-char"></span>
+ *         <div data-slot="input-otp-caret" hidden>
+ *           <div class="bg-foreground h-4 w-px animate-caret-blink"></div>
+ *         </div>
+ *       </div>
+ *     </div>
+ *   </div>
+ *
+ * @property {HTMLInputElement} inputTarget - The transparent real input element
+ * @property {HTMLElement[]} slotTargets - Visual slot div elements
+ * @property {Number} lengthValue - Expected OTP code length
+ * @property {String} patternValue - Regex pattern for allowed characters (default: digits only)
+ *
+ * @fires kiso--input-otp:change - When the OTP value changes.
+ *   Detail: `{ value: string }`
+ * @fires kiso--input-otp:complete - When all slots are filled.
+ *   Detail: `{ value: string }`
+ */
+export default class extends Controller {
+  static targets = ["input", "slot"]
+  static values = {
+    length: { type: Number, default: 6 },
+    pattern: { type: String, default: "\\d" },
+  }
+
+  /**
+   * Binds event listeners and syncs slots from any pre-filled value.
+   */
+  connect() {
+    this._handleInput = this._handleInput.bind(this)
+    this._handleKeydown = this._handleKeydown.bind(this)
+    this._handleFocus = this._handleFocus.bind(this)
+    this._handleBlur = this._handleBlur.bind(this)
+    this._handleClick = this._handleClick.bind(this)
+
+    this.inputTarget.addEventListener("input", this._handleInput)
+    this.inputTarget.addEventListener("keydown", this._handleKeydown)
+    this.inputTarget.addEventListener("focus", this._handleFocus)
+    this.inputTarget.addEventListener("blur", this._handleBlur)
+    this.element.addEventListener("click", this._handleClick)
+
+    this._syncSlots()
+  }
+
+  /**
+   * Removes event listeners.
+   */
+  disconnect() {
+    this.inputTarget.removeEventListener("input", this._handleInput)
+    this.inputTarget.removeEventListener("keydown", this._handleKeydown)
+    this.inputTarget.removeEventListener("focus", this._handleFocus)
+    this.inputTarget.removeEventListener("blur", this._handleBlur)
+    this.element.removeEventListener("click", this._handleClick)
+  }
+
+  /**
+   * Filters input against the pattern, syncs slots, and dispatches events.
+   *
+   * @private
+   */
+  _handleInput() {
+    const regex = new RegExp(this.patternValue)
+    const filtered = this.inputTarget.value
+      .split("")
+      .filter((char) => regex.test(char))
+      .join("")
+      .slice(0, this.lengthValue)
+
+    if (filtered !== this.inputTarget.value) {
+      this.inputTarget.value = filtered
+    }
+
+    this._syncSlots()
+    this._updateActiveSlot()
+
+    this.dispatch("change", { detail: { value: filtered } })
+
+    if (filtered.length === this.lengthValue) {
+      this.dispatch("complete", { detail: { value: filtered } })
+    }
+  }
+
+  /**
+   * Re-syncs the active slot after keydown events that may change selection
+   * (arrow keys, backspace, delete, home, end).
+   *
+   * @private
+   */
+  _handleKeydown() {
+    requestAnimationFrame(() => this._updateActiveSlot())
+  }
+
+  /**
+   * Shows the caret on the active slot when the input receives focus.
+   *
+   * @private
+   */
+  _handleFocus() {
+    this._updateActiveSlot()
+  }
+
+  /**
+   * Clears all active states and hides all carets on blur.
+   *
+   * @private
+   */
+  _handleBlur() {
+    this._clearActiveSlots()
+  }
+
+  /**
+   * Focuses the transparent input when clicking anywhere on the component.
+   * Places the cursor at the end of the current value.
+   *
+   * @private
+   */
+  _handleClick() {
+    this.inputTarget.focus()
+    const len = this.inputTarget.value.length
+    this.inputTarget.setSelectionRange(len, len)
+    this._updateActiveSlot()
+  }
+
+  /**
+   * Distributes input value characters to visual slot elements.
+   * Each slot's `[data-slot="input-otp-slot-char"]` span gets its character.
+   *
+   * @private
+   */
+  _syncSlots() {
+    const value = this.inputTarget.value
+    this.slotTargets.forEach((slot, index) => {
+      const charEl = slot.querySelector("[data-slot='input-otp-slot-char']")
+      if (charEl) {
+        charEl.textContent = value[index] || ""
+      }
+    })
+  }
+
+  /**
+   * Sets `data-active="true"` on the slot matching the cursor position.
+   * Shows the blinking caret on the active empty slot.
+   *
+   * @private
+   */
+  _updateActiveSlot() {
+    if (document.activeElement !== this.inputTarget) return
+
+    const pos = Math.min(this.inputTarget.selectionStart ?? 0, this.lengthValue - 1)
+
+    this.slotTargets.forEach((slot, index) => {
+      const isActive = index === pos
+      const charEl = slot.querySelector("[data-slot='input-otp-slot-char']")
+      const caretEl = slot.querySelector("[data-slot='input-otp-caret']")
+      const hasChar = charEl && charEl.textContent !== ""
+
+      slot.dataset.active = isActive
+      if (caretEl) {
+        caretEl.hidden = !(isActive && !hasChar)
+      }
+    })
+  }
+
+  /**
+   * Removes all active states and hides all carets.
+   *
+   * @private
+   */
+  _clearActiveSlots() {
+    this.slotTargets.forEach((slot) => {
+      delete slot.dataset.active
+      const caretEl = slot.querySelector("[data-slot='input-otp-caret']")
+      if (caretEl) caretEl.hidden = true
+    })
+  }
+}

data/app/javascript/controllers/kiso/popover_controller.js

@@ -0,0 +1,254 @@
+import { Controller } from "@hotwired/stimulus"
+import { FOCUSABLE_SELECTOR } from "kiso-ui/utils/focusable"
+import { startPositioning } from "kiso-ui/utils/positioning"
+
+/**
+ * Popover controller — toggles a floating panel anchored to a trigger element.
+ * Supports configurable alignment (start, center, end), focus trapping,
+ * and close-on-outside-click / Escape.
+ *
+ * @example
+ *   <div data-controller="kiso--popover" data-slot="popover">
+ *     <button data-kiso--popover-target="trigger"
+ *             data-action="click->kiso--popover#toggle keydown->kiso--popover#triggerKeydown">
+ *       Open
+ *     </button>
+ *     <div data-kiso--popover-target="content" data-align="center" role="dialog" hidden>
+ *       Content here
+ *     </div>
+ *   </div>
+ *
+ * @property {HTMLElement} triggerTarget - Button that opens/closes the popover
+ * @property {HTMLElement} contentTarget - The floating panel
+ * @property {HTMLElement} [anchorTarget] - Optional alternate positioning reference
+ */
+export default class extends Controller {
+  static targets = ["trigger", "content", "anchor"]
+
+  connect() {
+    this._open = false
+    this._handleOutsideClick = this._handleOutsideClick.bind(this)
+    this._handleKeydown = this._handleKeydown.bind(this)
+
+    // Set ARIA attrs on the interactive element inside the trigger wrapper
+    this._triggerButton =
+      this.triggerTarget.querySelector("button, [tabindex]") || this.triggerTarget
+    this._triggerButton.setAttribute("aria-haspopup", "dialog")
+    this._triggerButton.setAttribute("aria-expanded", "false")
+  }
+
+  disconnect() {
+    this._cleanupPosition?.()
+    this._clearCloseTimers()
+    this._removeGlobalListeners()
+  }
+
+  /**
+   * Toggles the popover open or closed.
+   * Skips if the click was auto-generated by a Space keyup (already handled in triggerKeydown).
+   *
+   * @param {Event} event
+   */
+  toggle(event) {
+    if (this._ignoreNextClick) {
+      this._ignoreNextClick = false
+      event.preventDefault()
+      return
+    }
+    event.preventDefault()
+    if (this._open) {
+      this.close()
+    } else {
+      this.open()
+    }
+  }
+
+  /**
+   * Opens the popover, positions it relative to the trigger (or anchor),
+   * and focuses the first focusable element inside.
+   */
+  open() {
+    if (this._open) return
+
+    this._clearCloseTimers()
+    this._open = true
+    this.contentTarget.hidden = false
+    this.contentTarget.setAttribute("data-state", "open")
+    this._triggerButton.setAttribute("aria-expanded", "true")
+    this.triggerTarget.setAttribute("data-state", "open")
+    this._positionContent()
+    this._addGlobalListeners()
+
+    // Focus the first focusable element inside the content
+    this._focusRaf = requestAnimationFrame(() => {
+      const focusable = this.contentTarget.querySelector(FOCUSABLE_SELECTOR)
+      if (focusable) {
+        focusable.focus()
+      }
+    })
+  }
+
+  /**
+   * Closes the popover with a closing animation, then hides it.
+   * Returns focus to the trigger button.
+   */
+  close() {
+    if (!this._open) return
+
+    this._cleanupPosition?.()
+    this._cleanupPosition = null
+    this._clearCloseTimers()
+    this._open = false
+    this.contentTarget.setAttribute("data-state", "closed")
+    this._triggerButton.setAttribute("aria-expanded", "false")
+    this.triggerTarget.setAttribute("data-state", "closed")
+
+    // Hide after animation completes
+    this._animationEndHandler = () => {
+      this.contentTarget.hidden = true
+      this.contentTarget.removeEventListener("animationend", this._animationEndHandler)
+    }
+    this.contentTarget.addEventListener("animationend", this._animationEndHandler)
+
+    // Fallback: if no animation, hide immediately
+    this._closeTimeout = setTimeout(() => {
+      if (this.contentTarget.getAttribute("data-state") === "closed") {
+        this.contentTarget.hidden = true
+      }
+    }, 200)
+
+    this._removeGlobalListeners()
+    // Focus the button inside the trigger wrapper, or the trigger itself
+    const btn = this.triggerTarget.querySelector("button, [tabindex]")
+    ;(btn || this.triggerTarget).focus()
+  }
+
+  /**
+   * Opens the popover on ArrowDown, Space, or Enter when trigger is focused.
+   *
+   * @param {KeyboardEvent} event
+   */
+  triggerKeydown(event) {
+    switch (event.key) {
+      case "ArrowDown":
+      case " ":
+      case "Enter":
+        event.preventDefault()
+        if (!this._open) {
+          this._ignoreNextClick = true
+          this.open()
+        }
+        break
+    }
+  }
+
+  // --- Private ---
+
+  /**
+   * Cancels any pending close timers and animation handlers.
+   *
+   * @private
+   */
+  _clearCloseTimers() {
+    if (this._closeTimeout) {
+      clearTimeout(this._closeTimeout)
+      this._closeTimeout = null
+    }
+    if (this._focusRaf) {
+      cancelAnimationFrame(this._focusRaf)
+      this._focusRaf = null
+    }
+    if (this._animationEndHandler) {
+      this.contentTarget.removeEventListener("animationend", this._animationEndHandler)
+      this._animationEndHandler = null
+    }
+  }
+
+  /** @private */
+  static _alignToPlacement = {
+    start: "bottom-start",
+    center: "bottom",
+    end: "bottom-end",
+  }
+
+  /**
+   * Positions the content panel relative to the reference element (trigger or anchor).
+   * Respects `data-align` on the content element: "start", "end", or "center" (default).
+   * Starts auto-updating on scroll/resize.
+   *
+   * @private
+   */
+  _positionContent() {
+    const reference = this.hasAnchorTarget ? this.anchorTarget : this.triggerTarget
+    const align = this.contentTarget.dataset.align || "center"
+    const placement = this.constructor._alignToPlacement[align] || "bottom"
+
+    this._cleanupPosition = startPositioning(reference, this.contentTarget, {
+      placement,
+    })
+  }
+
+  /**
+   * Closes the popover when clicking outside the component.
+   *
+   * @param {MouseEvent} event
+   * @private
+   */
+  _handleOutsideClick(event) {
+    if (!this.element.contains(event.target)) {
+      this.close()
+    }
+  }
+
+  /**
+   * Handles Escape to close and Tab to trap focus within the popover content.
+   *
+   * @param {KeyboardEvent} event
+   * @private
+   */
+  _handleKeydown(event) {
+    if (!this._open) return
+
+    if (event.key === "Escape") {
+      event.preventDefault()
+      this.close()
+    }
+
+    // Trap focus inside content
+    if (event.key === "Tab") {
+      const focusableElements = this.contentTarget.querySelectorAll(FOCUSABLE_SELECTOR)
+
+      if (focusableElements.length === 0) {
+        event.preventDefault()
+        return
+      }
+
+      const first = focusableElements[0]
+      const last = focusableElements[focusableElements.length - 1]
+
+      if (event.shiftKey) {
+        if (document.activeElement === first) {
+          event.preventDefault()
+          last.focus()
+        }
+      } else {
+        if (document.activeElement === last) {
+          event.preventDefault()
+          first.focus()
+        }
+      }
+    }
+  }
+
+  /** @private */
+  _addGlobalListeners() {
+    document.addEventListener("click", this._handleOutsideClick, true)
+    document.addEventListener("keydown", this._handleKeydown)
+  }
+
+  /** @private */
+  _removeGlobalListeners() {
+    document.removeEventListener("click", this._handleOutsideClick, true)
+    document.removeEventListener("keydown", this._handleKeydown)
+  }
+}