shadcn-phlex 0.1.0

data/js/controllers/navigation_menu_controller.js

@@ -0,0 +1,160 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Replicates Radix NavigationMenu behavior
+// Hover/click to open submenus, keyboard navigation, viewport
+export default class extends Controller {
+  static targets = ["item", "trigger", "content", "viewport", "link"]
+  static values = {
+    activeItem: { type: String, default: "" },
+    delayDuration: { type: Number, default: 200 },
+  }
+
+  connect() {
+    this._showTimeout = null
+    this._hideTimeout = null
+    this._onClickOutside = this._handleClickOutside.bind(this)
+    document.addEventListener("click", this._onClickOutside, true)
+  }
+
+  disconnect() {
+    clearTimeout(this._showTimeout)
+    clearTimeout(this._hideTimeout)
+    document.removeEventListener("click", this._onClickOutside, true)
+  }
+
+  enterTrigger(event) {
+    clearTimeout(this._hideTimeout)
+    const value = event.currentTarget.dataset.value
+    this._showTimeout = setTimeout(() => {
+      this.activeItemValue = value
+    }, this.delayDurationValue)
+  }
+
+  leaveTrigger() {
+    clearTimeout(this._showTimeout)
+    this._hideTimeout = setTimeout(() => {
+      this.activeItemValue = ""
+    }, this.delayDurationValue)
+  }
+
+  clickTrigger(event) {
+    const value = event.currentTarget.dataset.value
+    if (this.activeItemValue === value) {
+      this.activeItemValue = ""
+    } else {
+      this.activeItemValue = value
+    }
+  }
+
+  enterContent() {
+    clearTimeout(this._hideTimeout)
+  }
+
+  leaveContent() {
+    this._hideTimeout = setTimeout(() => {
+      this.activeItemValue = ""
+    }, this.delayDurationValue)
+  }
+
+  keydown(event) {
+    const triggers = this.triggerTargets
+    const current = triggers.indexOf(event.currentTarget)
+
+    switch (event.key) {
+      case "ArrowRight":
+        event.preventDefault()
+        triggers[(current + 1) % triggers.length]?.focus()
+        break
+      case "ArrowLeft":
+        event.preventDefault()
+        triggers[(current - 1 + triggers.length) % triggers.length]?.focus()
+        break
+      case "ArrowDown":
+        event.preventDefault()
+        if (this.activeItemValue) {
+          // Focus first link in active content
+          const content = this._getActiveContent()
+          const firstLink = content?.querySelector('[data-slot="navigation-menu-link"]')
+          firstLink?.focus()
+        } else {
+          this.activeItemValue = event.currentTarget.dataset.value
+        }
+        break
+      case "Escape":
+        event.preventDefault()
+        this.activeItemValue = ""
+        event.currentTarget.focus()
+        break
+      case "Enter":
+      case " ":
+        event.preventDefault()
+        this.clickTrigger(event)
+        break
+    }
+  }
+
+  contentKeydown(event) {
+    if (event.key === "Escape") {
+      event.preventDefault()
+      this.activeItemValue = ""
+      // Focus the trigger that opened this content
+      const trigger = this.triggerTargets.find(
+        (t) => t.dataset.value === this._lastActiveItem
+      )
+      trigger?.focus()
+    }
+
+    // Arrow navigation within content links
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault()
+      const links = Array.from(
+        this._getActiveContent()?.querySelectorAll('[data-slot="navigation-menu-link"]') || []
+      )
+      const current = links.indexOf(document.activeElement)
+      const next = event.key === "ArrowDown"
+        ? (current + 1) % links.length
+        : (current - 1 + links.length) % links.length
+      links[next]?.focus()
+    }
+  }
+
+  activeItemValueChanged() {
+    this._lastActiveItem = this.activeItemValue || this._lastActiveItem
+    this._syncState()
+  }
+
+  _syncState() {
+    this.triggerTargets.forEach((trigger) => {
+      const isActive = trigger.dataset.value === this.activeItemValue
+      trigger.dataset.state = isActive ? "open" : "closed"
+      trigger.setAttribute("aria-expanded", String(isActive))
+    })
+
+    this.contentTargets.forEach((content) => {
+      const isActive = content.dataset.value === this.activeItemValue
+      content.dataset.state = isActive ? "open" : "closed"
+      content.hidden = !isActive
+
+      if (isActive) {
+        content.dataset.motion = "from-start"
+      }
+    })
+
+    // Update viewport
+    this.viewportTargets.forEach((viewport) => {
+      const hasActive = this.activeItemValue !== ""
+      viewport.dataset.state = hasActive ? "open" : "closed"
+      viewport.hidden = !hasActive
+    })
+  }
+
+  _getActiveContent() {
+    return this.contentTargets.find((c) => c.dataset.value === this.activeItemValue)
+  }
+
+  _handleClickOutside(event) {
+    if (!this.element.contains(event.target)) {
+      this.activeItemValue = ""
+    }
+  }
+}

data/js/controllers/popover_controller.js

@@ -0,0 +1,151 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Replicates Radix Popover behavior
+// Uses Stimulus declarative click@window for outside click (no flicker)
+export default class extends Controller {
+  static targets = ["trigger", "content", "anchor", "close"]
+  static values = {
+    open: { type: Boolean, default: false },
+    side: { type: String, default: "bottom" },
+    align: { type: String, default: "center" },
+    sideOffset: { type: Number, default: 4 },
+  }
+
+  connect() {
+    this._hideTimeouts = []
+    // Ensure closed on connect
+    this.contentTargets.forEach((el) => { el.dataset.state = "closed"; el.hidden = true })
+    this.triggerTargets.forEach((el) => { el.dataset.state = "closed"; el.setAttribute("aria-expanded", "false") })
+  }
+
+  disconnect() {
+    this._hideTimeouts.forEach(id => clearTimeout(id))
+    this._hideTimeouts = []
+    window.removeEventListener("resize", this._onResize)
+  }
+
+  toggle() { this.openValue = !this.openValue }
+
+  // Wired as click@window->shadcn--popover#hide on the controller element
+  hide(event) {
+    if (!this.openValue) return
+    if (event && event.target && this.element.contains(event.target)) return
+    this.openValue = false
+  }
+
+  // Wired as keydown.esc@window->shadcn--popover#hideOnEscape
+  hideOnEscape() {
+    if (!this.openValue) return
+    this.openValue = false
+    this.triggerTargets[0]?.focus()
+  }
+
+  close() { this.openValue = false }
+
+  openValueChanged() {
+    if (!this._hideTimeouts) return
+    this._render()
+  }
+
+  _render() {
+    const open = this.openValue
+    const state = open ? "open" : "closed"
+
+    this._hideTimeouts.forEach(id => clearTimeout(id))
+    this._hideTimeouts = []
+
+    this.element.dataset.state = state
+    this.triggerTargets.forEach((el) => {
+      el.dataset.state = state
+      el.setAttribute("aria-expanded", String(open))
+    })
+
+    this.contentTargets.forEach((el) => {
+      if (open) {
+        el.getAnimations().forEach(a => a.cancel())
+        el.hidden = false
+        el.dataset.state = "open"
+        requestAnimationFrame(() => this._position(el))
+      } else {
+        el.dataset.state = "closed"
+        const animations = el.getAnimations()
+        if (animations.length > 0) {
+          Promise.all(animations.map(a => a.finished)).then(() => {
+            if (el.dataset.state === "closed") el.hidden = true
+          }).catch(() => {})
+        } else {
+          el.hidden = true
+        }
+      }
+    })
+
+    if (open) {
+      this._onResize = () => {
+        if (this.openValue && this.hasContentTarget) this._position(this.contentTarget)
+      }
+      window.addEventListener("resize", this._onResize)
+    } else {
+      window.removeEventListener("resize", this._onResize)
+    }
+  }
+
+  _position(content) {
+    const anchor = this.hasAnchorTarget ? this.anchorTarget : this.hasTriggerTarget ? this.triggerTarget : null
+    if (!anchor) return
+
+    const anchorRect = anchor.getBoundingClientRect()
+    const offset = this.sideOffsetValue
+
+    content.style.position = "fixed"
+    content.style.zIndex = "50"
+
+    const contentRect = content.getBoundingClientRect()
+    let top, left
+
+    switch (this.sideValue) {
+      case "top":
+        top = anchorRect.top - contentRect.height - offset
+        content.dataset.side = "top"
+        break
+      case "bottom":
+        top = anchorRect.bottom + offset
+        content.dataset.side = "bottom"
+        break
+      case "left":
+        top = anchorRect.top
+        left = anchorRect.left - contentRect.width - offset
+        content.dataset.side = "left"
+        break
+      case "right":
+        top = anchorRect.top
+        left = anchorRect.right + offset
+        content.dataset.side = "right"
+        break
+      default:
+        top = anchorRect.bottom + offset
+        content.dataset.side = "bottom"
+    }
+
+    if (this.sideValue === "top" || this.sideValue === "bottom") {
+      switch (this.alignValue) {
+        case "start": left = anchorRect.left; break
+        case "end": left = anchorRect.right - contentRect.width; break
+        default: left = anchorRect.left + (anchorRect.width - contentRect.width) / 2
+      }
+    }
+
+    if (top + contentRect.height > window.innerHeight && this.sideValue === "bottom") {
+      top = anchorRect.top - contentRect.height - offset
+      content.dataset.side = "top"
+    } else if (top < 0 && this.sideValue === "top") {
+      top = anchorRect.bottom + offset
+      content.dataset.side = "bottom"
+    }
+
+    left = Math.max(8, Math.min(left, window.innerWidth - contentRect.width - 8))
+    top = Math.max(8, Math.min(top, window.innerHeight - contentRect.height - 8))
+
+    content.style.top = `${top}px`
+    content.style.left = `${left}px`
+  }
+}

data/js/controllers/radio_group_controller.js

@@ -0,0 +1,78 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Replicates Radix RadioGroup behavior
+// Arrow key navigation, single selection, form integration
+export default class extends Controller {
+  static targets = ["item", "input"]
+  static values = {
+    value: { type: String, default: "" },
+    orientation: { type: String, default: "vertical" },
+    disabled: { type: Boolean, default: false },
+  }
+
+  connect() {
+    this._syncState()
+  }
+
+  select(event) {
+    if (this.disabledValue) return
+    const item = event.currentTarget
+    const value = item.dataset.value
+    if (value && value !== this.valueValue) {
+      this.valueValue = value
+      this.dispatch("change", { detail: { value } })
+    }
+  }
+
+  keydown(event) {
+    const items = this.itemTargets.filter((el) => !el.dataset.disabled)
+    const current = items.indexOf(event.currentTarget)
+    if (current === -1) return
+
+    const isVertical = this.orientationValue === "vertical"
+    const nextKey = isVertical ? "ArrowDown" : "ArrowRight"
+    const prevKey = isVertical ? "ArrowUp" : "ArrowLeft"
+    let nextIndex
+
+    switch (event.key) {
+      case nextKey:
+        event.preventDefault()
+        nextIndex = (current + 1) % items.length
+        items[nextIndex].focus()
+        this.valueValue = items[nextIndex].dataset.value
+        break
+      case prevKey:
+        event.preventDefault()
+        nextIndex = (current - 1 + items.length) % items.length
+        items[nextIndex].focus()
+        this.valueValue = items[nextIndex].dataset.value
+        break
+      case " ":
+        event.preventDefault()
+        this.valueValue = event.currentTarget.dataset.value
+        break
+    }
+  }
+
+  valueValueChanged() { this._syncState() }
+
+  _syncState() {
+    this.itemTargets.forEach((item) => {
+      const isChecked = item.dataset.value === this.valueValue
+      item.dataset.state = isChecked ? "checked" : "unchecked"
+      item.setAttribute("aria-checked", String(isChecked))
+      item.setAttribute("tabindex", isChecked ? "0" : "-1")
+
+      // Show/hide indicator
+      const indicator = item.querySelector("span")
+      if (indicator) {
+        indicator.hidden = !isChecked
+      }
+    })
+
+    // Update hidden input for form submission
+    this.inputTargets.forEach((input) => {
+      input.value = this.valueValue
+    })
+  }
+}

data/js/controllers/scroll_area_controller.js

@@ -0,0 +1,117 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Replicates Radix ScrollArea behavior
+// Custom scrollbar overlay, tracks scroll position
+export default class extends Controller {
+  static targets = ["viewport", "scrollbar", "thumb"]
+  static values = {
+    orientation: { type: String, default: "vertical" },
+  }
+
+  connect() {
+    this._onScroll = this._handleScroll.bind(this)
+    this._onPointerDown = this._handlePointerDown.bind(this)
+    this._onPointerMove = this._handlePointerMove.bind(this)
+    this._onPointerUp = this._handlePointerUp.bind(this)
+    this._dragging = false
+
+    if (this.hasViewportTarget) {
+      this.viewportTarget.addEventListener("scroll", this._onScroll, { passive: true })
+    }
+
+    this._updateThumb()
+
+    // Auto-hide scrollbar when not needed
+    this._observer = new ResizeObserver(() => this._updateThumb())
+    if (this.hasViewportTarget) {
+      this._observer.observe(this.viewportTarget)
+    }
+  }
+
+  disconnect() {
+    if (this.hasViewportTarget) {
+      this.viewportTarget.removeEventListener("scroll", this._onScroll)
+    }
+    this._observer?.disconnect()
+    document.removeEventListener("pointermove", this._onPointerMove)
+    document.removeEventListener("pointerup", this._onPointerUp)
+  }
+
+  startDrag(event) {
+    event.preventDefault()
+    this._dragging = true
+    this._dragStart = this.orientationValue === "vertical" ? event.clientY : event.clientX
+    this._scrollStart = this.orientationValue === "vertical"
+      ? this.viewportTarget.scrollTop
+      : this.viewportTarget.scrollLeft
+    document.addEventListener("pointermove", this._onPointerMove)
+    document.addEventListener("pointerup", this._onPointerUp)
+  }
+
+  _handleScroll() {
+    this._updateThumb()
+  }
+
+  _handlePointerDown(event) {
+    this.startDrag(event)
+  }
+
+  _handlePointerMove(event) {
+    if (!this._dragging || !this.hasViewportTarget) return
+
+    const viewport = this.viewportTarget
+    const isVertical = this.orientationValue === "vertical"
+
+    const delta = isVertical
+      ? event.clientY - this._dragStart
+      : event.clientX - this._dragStart
+
+    const viewportSize = isVertical ? viewport.clientHeight : viewport.clientWidth
+    const scrollSize = isVertical ? viewport.scrollHeight : viewport.scrollWidth
+    const scrollRatio = scrollSize / viewportSize
+
+    if (isVertical) {
+      viewport.scrollTop = this._scrollStart + delta * scrollRatio
+    } else {
+      viewport.scrollLeft = this._scrollStart + delta * scrollRatio
+    }
+  }
+
+  _handlePointerUp() {
+    this._dragging = false
+    document.removeEventListener("pointermove", this._onPointerMove)
+    document.removeEventListener("pointerup", this._onPointerUp)
+  }
+
+  _updateThumb() {
+    if (!this.hasViewportTarget || !this.hasThumbTarget) return
+
+    const viewport = this.viewportTarget
+    const isVertical = this.orientationValue === "vertical"
+
+    const viewportSize = isVertical ? viewport.clientHeight : viewport.clientWidth
+    const scrollSize = isVertical ? viewport.scrollHeight : viewport.scrollWidth
+    const scrollPos = isVertical ? viewport.scrollTop : viewport.scrollLeft
+
+    if (scrollSize <= viewportSize) {
+      // No scroll needed, hide scrollbar
+      this.scrollbarTargets.forEach((el) => { el.style.display = "none" })
+      return
+    }
+
+    this.scrollbarTargets.forEach((el) => { el.style.display = "" })
+
+    const thumbSize = Math.max((viewportSize / scrollSize) * viewportSize, 20)
+    const thumbPos = (scrollPos / (scrollSize - viewportSize)) * (viewportSize - thumbSize)
+
+    this.thumbTargets.forEach((thumb) => {
+      if (isVertical) {
+        thumb.style.height = `${thumbSize}px`
+        thumb.style.transform = `translateY(${thumbPos}px)`
+      } else {
+        thumb.style.width = `${thumbSize}px`
+        thumb.style.transform = `translateX(${thumbPos}px)`
+      }
+    })
+  }
+}

data/js/controllers/select_controller.js

@@ -0,0 +1,198 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Replicates Radix Select behavior
+// Uses Stimulus's declarative event wiring (click@window) for click-outside
+// instead of programmatic document listeners — this avoids flicker.
+export default class extends Controller {
+  static targets = ["trigger", "content", "item", "value", "input"]
+  static values = {
+    open: { type: Boolean, default: false },
+    value: { type: String, default: "" },
+    placeholder: { type: String, default: "Select..." },
+    disabled: { type: Boolean, default: false },
+  }
+
+  connect() {
+    this._hideTimeouts = []
+    this._syncValueState()
+    // Ensure closed on connect
+    this.contentTargets.forEach((el) => { el.dataset.state = "closed"; el.hidden = true })
+    this.triggerTargets.forEach((el) => { el.dataset.state = "closed"; el.setAttribute("aria-expanded", "false") })
+  }
+
+  disconnect() {
+    this._hideTimeouts.forEach(id => clearTimeout(id))
+    this._hideTimeouts = []
+  }
+
+  // Wired as: data-action="click->shadcn--select#toggle"
+  toggle() {
+    if (this.disabledValue) return
+    this.openValue = !this.openValue
+  }
+
+  // Wired as: data-action="click@window->shadcn--select#hide"
+  // This fires on EVERY click on the page. The guard ensures it only
+  // closes when the click is outside this element.
+  hide(event) {
+    if (!this.openValue) return
+    if (event && event.target && this.element.contains(event.target)) return
+    this.openValue = false
+  }
+
+  // Wired as: data-action="keydown.esc@window->shadcn--select#hideOnEscape"
+  hideOnEscape(event) {
+    if (!this.openValue) return
+    this.openValue = false
+    this.triggerTargets[0]?.focus()
+  }
+
+  // Wired as: data-action="click->shadcn--select#selectItem"
+  selectItem(event) {
+    const item = event.currentTarget
+    if (item.dataset.disabled) return
+
+    const value = item.dataset.value
+    const label = item.textContent.trim()
+
+    this.valueValue = value
+
+    this.valueTargets.forEach((el) => {
+      el.textContent = label
+      el.removeAttribute("data-placeholder")
+    })
+
+    this.dispatch("change", { detail: { value, label } })
+    this.openValue = false
+    this.triggerTargets[0]?.focus()
+  }
+
+  openValueChanged() {
+    if (!this._hideTimeouts) return
+    this._render()
+  }
+
+  valueValueChanged() {
+    if (!this._hideTimeouts) return
+    this._syncValueState()
+  }
+
+  // ── Private ─────────────────────────────────────────
+
+  _render() {
+    const open = this.openValue
+    const state = open ? "open" : "closed"
+
+    // Clear pending hides
+    this._hideTimeouts.forEach(id => clearTimeout(id))
+    this._hideTimeouts = []
+
+    this.triggerTargets.forEach((el) => {
+      el.dataset.state = state
+      el.setAttribute("aria-expanded", String(open))
+    })
+
+    this.contentTargets.forEach((el) => {
+      if (open) {
+        // Cancel any in-progress close animation
+        el.getAnimations().forEach(a => a.cancel())
+        el.hidden = false
+        el.dataset.state = "open"
+        this._position(el)
+        requestAnimationFrame(() => {
+          const selected = el.querySelector(`[data-value="${this.valueValue}"]`)
+          const target = selected || el.querySelector('[data-slot="select-item"]:not([data-disabled])')
+          target?.focus()
+        })
+      } else {
+        el.dataset.state = "closed"
+        // Wait for the CSS close animation to finish, then hide
+        const animations = el.getAnimations()
+        if (animations.length > 0) {
+          Promise.all(animations.map(a => a.finished)).then(() => {
+            if (el.dataset.state === "closed") el.hidden = true
+          }).catch(() => {
+            // Animation was cancelled (reopened before finishing)
+          })
+        } else {
+          el.hidden = true
+        }
+      }
+    })
+  }
+
+  _syncValueState() {
+    this.itemTargets.forEach((item) => {
+      const isSelected = item.dataset.value === this.valueValue
+      item.dataset.state = isSelected ? "checked" : "unchecked"
+      item.setAttribute("aria-selected", String(isSelected))
+      const indicator = item.querySelector("span")
+      if (indicator) indicator.style.visibility = isSelected ? "visible" : "hidden"
+    })
+
+    this.inputTargets.forEach((input) => { input.value = this.valueValue })
+
+    if (!this.valueValue) {
+      this.valueTargets.forEach((el) => {
+        el.textContent = this.placeholderValue
+        el.dataset.placeholder = ""
+      })
+    }
+  }
+
+  _position(content) {
+    if (!this.hasTriggerTarget) return
+    const rect = this.triggerTarget.getBoundingClientRect()
+
+    content.style.position = "fixed"
+    content.style.zIndex = "50"
+    content.style.width = `${rect.width}px`
+    content.style.minWidth = `${Math.max(rect.width, 128)}px`
+
+    let top = rect.bottom + 4
+    const contentHeight = content.scrollHeight
+    if (top + contentHeight > window.innerHeight) {
+      top = rect.top - contentHeight - 4
+    }
+    content.style.top = `${top}px`
+    content.style.left = `${rect.left}px`
+  }
+
+  // Keyboard nav within the open dropdown
+  navigate(event) {
+    if (!this.openValue) return
+    const items = this._getItems()
+    const current = items.indexOf(document.activeElement)
+
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault()
+        items[(current + 1) % items.length]?.focus()
+        break
+      case "ArrowUp":
+        event.preventDefault()
+        items[(current - 1 + items.length) % items.length]?.focus()
+        break
+      case "Home":
+        event.preventDefault()
+        items[0]?.focus()
+        break
+      case "End":
+        event.preventDefault()
+        items[items.length - 1]?.focus()
+        break
+      case "Enter":
+      case " ":
+        if (document.activeElement?.matches('[data-slot="select-item"]')) {
+          event.preventDefault()
+          document.activeElement.click()
+        }
+        break
+    }
+  }
+
+  _getItems() {
+    if (!this.hasContentTarget) return []
+    return Array.from(this.contentTarget.querySelectorAll('[data-slot="select-item"]:not([data-disabled])'))
+  }
+}