shadcn-phlex 0.1.0

data/js/controllers/drawer_controller.js

@@ -0,0 +1,161 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Replicates Vaul Drawer behavior (swipe to dismiss, snap points)
+export default class extends Controller {
+  static targets = ["trigger", "overlay", "content", "close", "handle"]
+  static values = {
+    open: { type: Boolean, default: false },
+    direction: { type: String, default: "bottom" },
+    closeOnOverlay: { type: Boolean, default: true },
+    closeThreshold: { type: Number, default: 0.25 },
+  }
+
+  connect() {
+    this._onKeydown = this._handleKeydown.bind(this)
+    this._onPointerDown = this._handlePointerDown.bind(this)
+    this._onPointerMove = this._handlePointerMove.bind(this)
+    this._onPointerUp = this._handlePointerUp.bind(this)
+    this._dragging = false
+    this._startY = 0
+    this._startX = 0
+    this._currentTranslate = 0
+    this._hideTimeouts = []
+    this._syncState()
+  }
+
+  disconnect() {
+    this._hideTimeouts.forEach(id => clearTimeout(id))
+    this._hideTimeouts = []
+    document.removeEventListener("keydown", this._onKeydown)
+    this._unlockScroll()
+    this._removeDragListeners()
+  }
+
+  toggle() { this.openValue = !this.openValue }
+  show() { this.openValue = true }
+  hide() { this.openValue = false }
+
+  openValueChanged() { this._syncState() }
+
+  clickOverlay(event) {
+    if (this.closeOnOverlayValue && event.target === event.currentTarget) this.hide()
+  }
+
+  _syncState() {
+    if (!this._hideTimeouts) return
+    const state = this.openValue ? "open" : "closed"
+    this.element.dataset.state = state
+
+    this.overlayTargets.forEach((el) => {
+      el.dataset.state = state
+      if (this.openValue) el.hidden = false
+      else this._hideAfterAnimation(el)
+    })
+
+    this.contentTargets.forEach((el) => {
+      el.dataset.state = state
+      el.style.transform = ""
+      if (this.openValue) {
+        el.hidden = false
+        this._addDragListeners(el)
+      } else {
+        this._hideAfterAnimation(el)
+        this._removeDragListeners()
+      }
+    })
+
+    if (this.openValue) {
+      this._lockScroll()
+      document.addEventListener("keydown", this._onKeydown)
+    } else {
+      this._unlockScroll()
+      document.removeEventListener("keydown", this._onKeydown)
+    }
+  }
+
+  _addDragListeners(el) {
+    el.addEventListener("pointerdown", this._onPointerDown)
+  }
+
+  _removeDragListeners() {
+    document.removeEventListener("pointermove", this._onPointerMove)
+    document.removeEventListener("pointerup", this._onPointerUp)
+  }
+
+  _handlePointerDown(event) {
+    // Only drag from handle or top area
+    const handle = event.target.closest('[data-slot="drawer-handle"], [class*="bg-muted"]')
+    if (!handle && this.directionValue === "bottom") return
+
+    this._dragging = true
+    this._startY = event.clientY
+    this._startX = event.clientX
+    this._currentTranslate = 0
+
+    document.addEventListener("pointermove", this._onPointerMove)
+    document.addEventListener("pointerup", this._onPointerUp)
+  }
+
+  _handlePointerMove(event) {
+    if (!this._dragging || !this.hasContentTarget) return
+
+    const content = this.contentTarget
+    const dir = this.directionValue
+
+    let delta
+    if (dir === "bottom") {
+      delta = Math.max(0, event.clientY - this._startY)
+      content.style.transform = `translateY(${delta}px)`
+    } else if (dir === "top") {
+      delta = Math.max(0, this._startY - event.clientY)
+      content.style.transform = `translateY(-${delta}px)`
+    } else if (dir === "right") {
+      delta = Math.max(0, event.clientX - this._startX)
+      content.style.transform = `translateX(${delta}px)`
+    } else if (dir === "left") {
+      delta = Math.max(0, this._startX - event.clientX)
+      content.style.transform = `translateX(-${delta}px)`
+    }
+    this._currentTranslate = delta || 0
+  }
+
+  _handlePointerUp() {
+    this._dragging = false
+    this._removeDragListeners()
+
+    if (!this.hasContentTarget) return
+    const content = this.contentTarget
+    const size = this.directionValue === "left" || this.directionValue === "right"
+      ? content.offsetWidth : content.offsetHeight
+
+    if (this._currentTranslate / size > this.closeThresholdValue) {
+      this.hide()
+    } else {
+      content.style.transition = "transform 300ms ease"
+      content.style.transform = ""
+      const onEnd = () => {
+        content.style.transition = ""
+        content.removeEventListener("transitionend", onEnd)
+      }
+      content.addEventListener("transitionend", onEnd)
+    }
+  }
+
+  _handleKeydown(event) {
+    if (event.key === "Escape") { event.preventDefault(); this.hide() }
+  }
+
+  _lockScroll() {
+    document.body.style.overflow = "hidden"
+    document.body.style.paddingRight = `${window.innerWidth - document.documentElement.clientWidth}px`
+  }
+
+  _unlockScroll() {
+    document.body.style.overflow = ""
+    document.body.style.paddingRight = ""
+  }
+
+  _hideAfterAnimation(el) {
+    this._hideTimeouts.push(setTimeout(() => { if (el.dataset.state === "closed") el.hidden = true }, 500))
+  }
+}

data/js/controllers/dropdown_menu_controller.js

@@ -0,0 +1,189 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Replicates Radix DropdownMenu behavior
+// Uses Stimulus declarative click@window for outside click (no flicker)
+export default class extends Controller {
+  static targets = ["trigger", "content", "item", "sub", "subTrigger", "subContent"]
+  static values = {
+    open: { type: Boolean, default: false },
+    closeOnSelect: { type: Boolean, default: true },
+  }
+
+  connect() {
+    this._hideTimeouts = []
+    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 = []
+  }
+
+  toggle(event) {
+    event?.preventDefault()
+    this.openValue = !this.openValue
+  }
+
+  // Wired as click@window->shadcn--dropdown-menu#hide
+  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--dropdown-menu#hideOnEscape
+  hideOnEscape() {
+    if (!this.openValue) return
+    this.openValue = false
+    this.triggerTargets[0]?.focus()
+  }
+
+  close() { this.openValue = false }
+
+  selectItem(event) {
+    const item = event.currentTarget
+    if (item.dataset.disabled) return
+    this.dispatch("select", { detail: { value: item.dataset.value } })
+    if (this.closeOnSelectValue) this.close()
+  }
+
+  // Keyboard nav within the open menu
+  navigate(event) {
+    if (!this.openValue) return
+
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault()
+        const items = this._getMenuItems()
+        const current = items.indexOf(document.activeElement)
+        items[(current + 1) % items.length]?.focus()
+        break
+      }
+      case "ArrowUp": {
+        event.preventDefault()
+        const items = this._getMenuItems()
+        const current = items.indexOf(document.activeElement)
+        items[(current - 1 + items.length) % items.length]?.focus()
+        break
+      }
+      case "Home":
+        event.preventDefault()
+        this._getMenuItems()[0]?.focus()
+        break
+      case "End": {
+        event.preventDefault()
+        const items = this._getMenuItems()
+        items[items.length - 1]?.focus()
+        break
+      }
+      case "Enter":
+      case " ":
+        if (document.activeElement?.matches('[data-slot*="menu-item"]')) {
+          event.preventDefault()
+          document.activeElement.click()
+        }
+        break
+      case "ArrowRight": {
+        const subTrigger = document.activeElement?.closest('[data-slot*="sub-trigger"]')
+        if (subTrigger) {
+          event.preventDefault()
+          const sub = subTrigger.closest('[data-slot*="sub"]')
+          const subContent = sub?.querySelector('[data-slot*="sub-content"]')
+          if (subContent) {
+            subContent.hidden = false
+            subContent.dataset.state = "open"
+            subContent.querySelector('[data-slot*="menu-item"]:not([data-disabled])')?.focus()
+          }
+        }
+        break
+      }
+      case "ArrowLeft": {
+        const subContent = document.activeElement?.closest('[data-slot*="sub-content"]')
+        if (subContent) {
+          event.preventDefault()
+          subContent.dataset.state = "closed"
+          subContent.hidden = true
+          const subTrigger = subContent.previousElementSibling ||
+            subContent.closest('[data-slot*="sub"]')?.querySelector('[data-slot*="sub-trigger"]')
+          subTrigger?.focus()
+        }
+        break
+      }
+    }
+  }
+
+  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))
+      el.setAttribute("aria-haspopup", "menu")
+    })
+
+    this.contentTargets.forEach((el) => {
+      if (open) {
+        el.getAnimations().forEach(a => a.cancel())
+        el.hidden = false
+        el.dataset.state = "open"
+        requestAnimationFrame(() => this._positionContent(el))
+        requestAnimationFrame(() => {
+          el.querySelector('[data-slot*="menu-item"]:not([data-disabled])')?.focus()
+        })
+      } 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
+        }
+      }
+    })
+  }
+
+  _positionContent(content) {
+    if (!this.hasTriggerTarget) return
+    const rect = this.triggerTarget.getBoundingClientRect()
+
+    content.style.position = "fixed"
+    content.style.zIndex = "50"
+
+    let top = rect.bottom + 4
+    let left = rect.left
+    const contentRect = content.getBoundingClientRect()
+
+    if (top + contentRect.height > window.innerHeight) {
+      top = rect.top - contentRect.height - 4
+      content.dataset.side = "top"
+    } else {
+      content.dataset.side = "bottom"
+    }
+
+    if (left + contentRect.width > window.innerWidth) left = window.innerWidth - contentRect.width - 8
+    if (left < 8) left = 8
+
+    content.style.top = `${top}px`
+    content.style.left = `${left}px`
+  }
+
+  _getMenuItems() {
+    if (!this.hasContentTarget) return []
+    return Array.from(this.contentTarget.querySelectorAll(
+      '[data-slot*="menu-item"]:not([data-disabled]), [data-slot*="checkbox-item"]:not([data-disabled]), [data-slot*="radio-item"]:not([data-disabled]), [data-slot*="sub-trigger"]:not([data-disabled])'
+    )).filter((el) => !el.closest("[hidden]"))
+  }
+}

data/js/controllers/hover_card_controller.js

@@ -0,0 +1,85 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Replicates Radix HoverCard behavior
+// Show on hover with delay, content stays open while hovering content
+export default class extends Controller {
+  static targets = ["trigger", "content"]
+  static values = {
+    open: { type: Boolean, default: false },
+    openDelay: { type: Number, default: 700 },
+    closeDelay: { type: Number, default: 300 },
+  }
+
+  connect() {
+    this._showTimeout = null
+    this._hideTimeout = null
+    this._hideTimeouts = []
+    this._syncState()
+  }
+
+  disconnect() {
+    clearTimeout(this._showTimeout)
+    clearTimeout(this._hideTimeout)
+    this._hideTimeouts.forEach(id => clearTimeout(id))
+    this._hideTimeouts = []
+  }
+
+  triggerEnter() {
+    clearTimeout(this._hideTimeout)
+    this._showTimeout = setTimeout(() => { this.openValue = true }, this.openDelayValue)
+  }
+
+  triggerLeave() {
+    clearTimeout(this._showTimeout)
+    this._hideTimeout = setTimeout(() => { this.openValue = false }, this.closeDelayValue)
+  }
+
+  contentEnter() {
+    clearTimeout(this._hideTimeout)
+  }
+
+  contentLeave() {
+    this._hideTimeout = setTimeout(() => { this.openValue = false }, this.closeDelayValue)
+  }
+
+  openValueChanged() { this._syncState() }
+
+  _syncState() {
+    if (!this._hideTimeouts) return
+    const state = this.openValue ? "open" : "closed"
+
+    this.contentTargets.forEach((el) => {
+      el.dataset.state = state
+      if (this.openValue) {
+        el.hidden = false
+        this._position(el)
+      } else {
+        this._hideTimeouts.push(setTimeout(() => { if (el.dataset.state === "closed") el.hidden = true }, 200))
+      }
+    })
+  }
+
+  _position(content) {
+    if (!this.hasTriggerTarget) return
+    const rect = this.triggerTarget.getBoundingClientRect()
+
+    content.style.position = "fixed"
+    content.style.zIndex = "50"
+
+    const contentRect = content.getBoundingClientRect()
+    let top = rect.bottom + 4
+    let left = rect.left + (rect.width - contentRect.width) / 2
+
+    if (top + contentRect.height > window.innerHeight) {
+      top = rect.top - contentRect.height - 4
+      content.dataset.side = "top"
+    } else {
+      content.dataset.side = "bottom"
+    }
+
+    left = Math.max(8, Math.min(left, window.innerWidth - contentRect.width - 8))
+
+    content.style.top = `${top}px`
+    content.style.left = `${left}px`
+  }
+}

data/js/controllers/index.js

@@ -0,0 +1,89 @@
+// Shadcn Phlex Stimulus Controllers
+// Register all controllers with your Stimulus application
+//
+// Usage with importmap-rails or jsbundling:
+//   import { application } from "controllers/application"
+//   import { registerShadcnControllers } from "shadcn/controllers"
+//   registerShadcnControllers(application)
+
+import AccordionController from "./accordion_controller"
+import DarkModeController from "./dark_mode_controller"
+import CheckboxController from "./checkbox_controller"
+import CollapsibleController from "./collapsible_controller"
+import ComboboxController from "./combobox_controller"
+import CommandController from "./command_controller"
+import ContextMenuController from "./context_menu_controller"
+import DialogController from "./dialog_controller"
+import DrawerController from "./drawer_controller"
+import DropdownMenuController from "./dropdown_menu_controller"
+import HoverCardController from "./hover_card_controller"
+import MenubarController from "./menubar_controller"
+import NavigationMenuController from "./navigation_menu_controller"
+import PopoverController from "./popover_controller"
+import RadioGroupController from "./radio_group_controller"
+import ScrollAreaController from "./scroll_area_controller"
+import SelectController from "./select_controller"
+import SheetController from "./sheet_controller"
+import SliderController from "./slider_controller"
+import SwitchController from "./switch_controller"
+import TabsController from "./tabs_controller"
+import ToastController from "./toast_controller"
+import ToggleController from "./toggle_controller"
+import ToggleGroupController from "./toggle_group_controller"
+import TooltipController from "./tooltip_controller"
+
+export function registerShadcnControllers(application) {
+  application.register("shadcn--accordion", AccordionController)
+  application.register("shadcn--dark-mode", DarkModeController)
+  application.register("shadcn--checkbox", CheckboxController)
+  application.register("shadcn--collapsible", CollapsibleController)
+  application.register("shadcn--combobox", ComboboxController)
+  application.register("shadcn--command", CommandController)
+  application.register("shadcn--context-menu", ContextMenuController)
+  application.register("shadcn--dialog", DialogController)
+  application.register("shadcn--drawer", DrawerController)
+  application.register("shadcn--dropdown-menu", DropdownMenuController)
+  application.register("shadcn--hover-card", HoverCardController)
+  application.register("shadcn--menubar", MenubarController)
+  application.register("shadcn--navigation-menu", NavigationMenuController)
+  application.register("shadcn--popover", PopoverController)
+  application.register("shadcn--radio-group", RadioGroupController)
+  application.register("shadcn--scroll-area", ScrollAreaController)
+  application.register("shadcn--select", SelectController)
+  application.register("shadcn--sheet", SheetController)
+  application.register("shadcn--slider", SliderController)
+  application.register("shadcn--switch", SwitchController)
+  application.register("shadcn--tabs", TabsController)
+  application.register("shadcn--toast", ToastController)
+  application.register("shadcn--toggle", ToggleController)
+  application.register("shadcn--toggle-group", ToggleGroupController)
+  application.register("shadcn--tooltip", TooltipController)
+}
+
+export {
+  AccordionController,
+  DarkModeController,
+  CheckboxController,
+  CollapsibleController,
+  ComboboxController,
+  CommandController,
+  ContextMenuController,
+  DialogController,
+  DrawerController,
+  DropdownMenuController,
+  HoverCardController,
+  MenubarController,
+  NavigationMenuController,
+  PopoverController,
+  RadioGroupController,
+  ScrollAreaController,
+  SelectController,
+  SheetController,
+  SliderController,
+  SwitchController,
+  TabsController,
+  ToastController,
+  ToggleController,
+  ToggleGroupController,
+  TooltipController,
+}

data/js/controllers/menubar_controller.js

@@ -0,0 +1,171 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Replicates Radix Menubar behavior
+// Horizontal menu bar with dropdown submenus, keyboard navigation
+export default class extends Controller {
+  static targets = ["menu", "trigger", "content", "item"]
+  static values = {
+    activeMenu: { type: String, default: "" },
+  }
+
+  connect() {
+    this._onClickOutside = this._handleClickOutside.bind(this)
+    this._onKeydown = this._handleKeydown.bind(this)
+    this._hideTimeouts = []
+  }
+
+  disconnect() {
+    this._hideTimeouts.forEach(id => clearTimeout(id))
+    this._hideTimeouts = []
+    this._removeListeners()
+  }
+
+  toggleMenu(event) {
+    const trigger = event.currentTarget
+    const value = trigger.dataset.value
+
+    if (this.activeMenuValue === value) {
+      this.activeMenuValue = ""
+    } else {
+      this.activeMenuValue = value
+    }
+  }
+
+  enterTrigger(event) {
+    // If another menu is already open, switch to this one on hover
+    if (this.activeMenuValue) {
+      const value = event.currentTarget.dataset.value
+      if (value !== this.activeMenuValue) {
+        this.activeMenuValue = value
+      }
+    }
+  }
+
+  selectItem(event) {
+    const item = event.currentTarget
+    if (item.dataset.disabled) return
+    this.dispatch("select", { detail: { value: item.dataset.value } })
+    this.activeMenuValue = ""
+  }
+
+  activeMenuValueChanged() {
+    this._syncState()
+    if (this.activeMenuValue) {
+      document.addEventListener("click", this._onClickOutside, true)
+      document.addEventListener("keydown", this._onKeydown)
+    } else {
+      this._removeListeners()
+    }
+  }
+
+  _syncState() {
+    if (!this._hideTimeouts) return
+    this.triggerTargets.forEach((trigger) => {
+      const isActive = trigger.dataset.value === this.activeMenuValue
+      trigger.dataset.state = isActive ? "open" : "closed"
+      trigger.setAttribute("aria-expanded", String(isActive))
+    })
+
+    this.contentTargets.forEach((content) => {
+      const isActive = content.dataset.value === this.activeMenuValue
+      content.dataset.state = isActive ? "open" : "closed"
+
+      if (isActive) {
+        content.hidden = false
+        this._positionContent(content)
+        requestAnimationFrame(() => {
+          const firstItem = content.querySelector('[data-slot*="menubar-item"]:not([data-disabled])')
+          firstItem?.focus()
+        })
+      } else {
+        this._hideTimeouts.push(setTimeout(() => { if (content.dataset.state === "closed") content.hidden = true }, 200))
+      }
+    })
+  }
+
+  _positionContent(content) {
+    const trigger = this.triggerTargets.find((t) => t.dataset.value === this.activeMenuValue)
+    if (!trigger) return
+
+    const rect = trigger.getBoundingClientRect()
+    content.style.position = "fixed"
+    content.style.zIndex = "50"
+    content.style.top = `${rect.bottom + 4}px`
+    content.style.left = `${rect.left}px`
+
+    // Adjust if overflowing
+    requestAnimationFrame(() => {
+      const contentRect = content.getBoundingClientRect()
+      if (contentRect.right > window.innerWidth) {
+        content.style.left = `${window.innerWidth - contentRect.width - 8}px`
+      }
+      if (contentRect.bottom > window.innerHeight) {
+        content.style.top = `${rect.top - contentRect.height - 4}px`
+      }
+    })
+  }
+
+  _handleClickOutside(event) {
+    if (!this.element.contains(event.target)) {
+      this.activeMenuValue = ""
+    }
+  }
+
+  _handleKeydown(event) {
+    if (event.key === "Escape") {
+      event.preventDefault()
+      const trigger = this.triggerTargets.find((t) => t.dataset.value === this.activeMenuValue)
+      this.activeMenuValue = ""
+      trigger?.focus()
+      return
+    }
+
+    // Navigate between menus with Left/Right
+    if (event.key === "ArrowRight" || event.key === "ArrowLeft") {
+      const triggers = this.triggerTargets
+      const currentIdx = triggers.findIndex((t) => t.dataset.value === this.activeMenuValue)
+      if (currentIdx === -1) return
+
+      const isInContent = document.activeElement?.closest('[data-slot*="menubar-content"]')
+      if (isInContent) {
+        event.preventDefault()
+        const nextIdx = event.key === "ArrowRight"
+          ? (currentIdx + 1) % triggers.length
+          : (currentIdx - 1 + triggers.length) % triggers.length
+        this.activeMenuValue = triggers[nextIdx].dataset.value
+        return
+      }
+    }
+
+    // Arrow down/up within menu items
+    if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      const items = this._getActiveItems()
+      const current = items.indexOf(document.activeElement)
+      event.preventDefault()
+      const next = event.key === "ArrowDown"
+        ? (current + 1) % items.length
+        : (current - 1 + items.length) % items.length
+      items[next]?.focus()
+    }
+
+    if (event.key === "Enter" || event.key === " ") {
+      if (document.activeElement?.matches('[data-slot*="menubar-item"]')) {
+        event.preventDefault()
+        document.activeElement.click()
+      }
+    }
+  }
+
+  _getActiveItems() {
+    const content = this.contentTargets.find((c) => c.dataset.value === this.activeMenuValue)
+    if (!content) return []
+    return Array.from(content.querySelectorAll(
+      '[data-slot*="menubar-item"]:not([data-disabled]), [data-slot*="checkbox-item"]:not([data-disabled]), [data-slot*="radio-item"]:not([data-disabled])'
+    )).filter((el) => !el.closest("[hidden]"))
+  }
+
+  _removeListeners() {
+    document.removeEventListener("click", this._onClickOutside, true)
+    document.removeEventListener("keydown", this._onKeydown)
+  }
+}