shadcn-phlex 0.1.0

data/js/controllers/sheet_controller.js

@@ -0,0 +1,130 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Replicates Radix Dialog behavior for Sheet (slide-out panel)
+// Same as Dialog but without zoom animation, uses slide instead
+export default class extends Controller {
+  static targets = ["trigger", "overlay", "content", "close", "title", "description"]
+  static values = {
+    open: { type: Boolean, default: false },
+    side: { type: String, default: "right" },
+    closeOnOverlay: { type: Boolean, default: true },
+    closeOnEscape: { type: Boolean, default: true },
+  }
+
+  connect() {
+    this._onKeydown = this._handleKeydown.bind(this)
+    this._previouslyFocused = null
+    this._hideTimeouts = []
+    this._syncState()
+  }
+
+  disconnect() {
+    this._hideTimeouts.forEach(id => clearTimeout(id))
+    this._hideTimeouts = []
+    document.removeEventListener("keydown", this._onKeydown)
+    this._unlockScroll()
+  }
+
+  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.dataset.side = this.sideValue
+      if (this.openValue) {
+        el.hidden = false
+        el.setAttribute("role", "dialog")
+        el.setAttribute("aria-modal", "true")
+      } else {
+        this._hideAfterAnimation(el)
+      }
+    })
+
+    if (this.openValue) {
+      this._lockScroll()
+      document.addEventListener("keydown", this._onKeydown)
+      requestAnimationFrame(() => this._trapFocus())
+    } else {
+      this._unlockScroll()
+      document.removeEventListener("keydown", this._onKeydown)
+      if (this._previouslyFocused?.focus) {
+        this._previouslyFocused.focus()
+        this._previouslyFocused = null
+      }
+    }
+  }
+
+  _trapFocus() {
+    this._previouslyFocused = document.activeElement
+    if (this.hasContentTarget) {
+      const focusable = this._getFocusable(this.contentTarget)
+      if (focusable.length > 0) focusable[0].focus()
+    }
+  }
+
+  _handleKeydown(event) {
+    if (event.key === "Escape" && this.closeOnEscapeValue) {
+      event.preventDefault()
+      this.hide()
+      return
+    }
+    if (event.key === "Tab" && this.hasContentTarget) {
+      const focusable = this._getFocusable(this.contentTarget)
+      if (focusable.length === 0) return
+      const first = focusable[0]
+      const last = focusable[focusable.length - 1]
+      if (event.shiftKey && document.activeElement === first) {
+        event.preventDefault()
+        last.focus()
+      } else if (!event.shiftKey && document.activeElement === last) {
+        event.preventDefault()
+        first.focus()
+      }
+    }
+  }
+
+  _getFocusable(container) {
+    return Array.from(container.querySelectorAll(
+      'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
+    )).filter((el) => !el.closest("[hidden]") && el.offsetParent !== null)
+  }
+
+  _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) {
+    const onEnd = () => { if (el.dataset.state === "closed") el.hidden = true; el.removeEventListener("animationend", onEnd) }
+    el.addEventListener("animationend", onEnd)
+    this._hideTimeouts.push(setTimeout(() => { if (el.dataset.state === "closed") el.hidden = true }, 500))
+  }
+}

data/js/controllers/slider_controller.js

@@ -0,0 +1,142 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Replicates Radix Slider behavior
+// Drag, keyboard (arrows, page up/down, home/end), ARIA, form integration
+export default class extends Controller {
+  static targets = ["track", "range", "thumb", "input"]
+  static values = {
+    value: { type: Number, default: 0 },
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    step: { type: Number, default: 1 },
+    disabled: { type: Boolean, default: false },
+    orientation: { type: String, default: "horizontal" },
+  }
+
+  connect() {
+    this._onPointerMove = this._handlePointerMove.bind(this)
+    this._onPointerUp = this._handlePointerUp.bind(this)
+    this._dragging = false
+    this._syncState()
+  }
+
+  disconnect() {
+    document.removeEventListener("pointermove", this._onPointerMove)
+    document.removeEventListener("pointerup", this._onPointerUp)
+  }
+
+  // Click on track to set value
+  clickTrack(event) {
+    if (this.disabledValue) return
+    this._setValueFromPointer(event)
+  }
+
+  // Start dragging thumb
+  startDrag(event) {
+    if (this.disabledValue) return
+    event.preventDefault()
+    this._dragging = true
+    document.addEventListener("pointermove", this._onPointerMove)
+    document.addEventListener("pointerup", this._onPointerUp)
+  }
+
+  // Keyboard control
+  keydown(event) {
+    if (this.disabledValue) return
+
+    const step = this.stepValue
+    const bigStep = (this.maxValue - this.minValue) / 10
+
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        event.preventDefault()
+        this.valueValue = Math.min(this.maxValue, this.valueValue + step)
+        break
+      case "ArrowLeft":
+      case "ArrowDown":
+        event.preventDefault()
+        this.valueValue = Math.max(this.minValue, this.valueValue - step)
+        break
+      case "PageUp":
+        event.preventDefault()
+        this.valueValue = Math.min(this.maxValue, this.valueValue + bigStep)
+        break
+      case "PageDown":
+        event.preventDefault()
+        this.valueValue = Math.max(this.minValue, this.valueValue - bigStep)
+        break
+      case "Home":
+        event.preventDefault()
+        this.valueValue = this.minValue
+        break
+      case "End":
+        event.preventDefault()
+        this.valueValue = this.maxValue
+        break
+    }
+
+    this.dispatch("change", { detail: { value: this.valueValue } })
+  }
+
+  valueValueChanged() { this._syncState() }
+
+  _handlePointerMove(event) {
+    if (!this._dragging) return
+    this._setValueFromPointer(event)
+  }
+
+  _handlePointerUp() {
+    this._dragging = false
+    document.removeEventListener("pointermove", this._onPointerMove)
+    document.removeEventListener("pointerup", this._onPointerUp)
+    this.dispatch("change", { detail: { value: this.valueValue } })
+  }
+
+  _setValueFromPointer(event) {
+    if (!this.hasTrackTarget) return
+
+    const rect = this.trackTarget.getBoundingClientRect()
+    let ratio
+
+    if (this.orientationValue === "horizontal") {
+      ratio = (event.clientX - rect.left) / rect.width
+    } else {
+      ratio = 1 - (event.clientY - rect.top) / rect.height
+    }
+
+    ratio = Math.max(0, Math.min(1, ratio))
+    const raw = this.minValue + ratio * (this.maxValue - this.minValue)
+    const stepped = Math.round(raw / this.stepValue) * this.stepValue
+    this.valueValue = Math.max(this.minValue, Math.min(this.maxValue, stepped))
+  }
+
+  _syncState() {
+    const pct = ((this.valueValue - this.minValue) / (this.maxValue - this.minValue)) * 100
+
+    this.rangeTargets.forEach((el) => {
+      if (this.orientationValue === "horizontal") {
+        el.style.width = `${pct}%`
+      } else {
+        el.style.height = `${pct}%`
+      }
+    })
+
+    this.thumbTargets.forEach((el) => {
+      if (this.orientationValue === "horizontal") {
+        el.style.left = `${pct}%`
+        el.style.transform = "translateX(-50%)"
+      } else {
+        el.style.bottom = `${pct}%`
+        el.style.transform = "translateY(50%)"
+      }
+      el.setAttribute("aria-valuenow", String(this.valueValue))
+      el.setAttribute("aria-valuemin", String(this.minValue))
+      el.setAttribute("aria-valuemax", String(this.maxValue))
+    })
+
+    this.inputTargets.forEach((input) => {
+      input.value = String(this.valueValue)
+    })
+  }
+}

data/js/controllers/switch_controller.js

@@ -0,0 +1,40 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Replicates Radix Switch behavior
+export default class extends Controller {
+  static targets = ["button", "thumb", "input"]
+  static values = {
+    checked: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+  }
+
+  connect() {
+    this._syncState()
+  }
+
+  toggle() {
+    if (this.disabledValue) return
+    this.checkedValue = !this.checkedValue
+    this.dispatch("change", { detail: { checked: this.checkedValue } })
+  }
+
+  checkedValueChanged() { this._syncState() }
+
+  _syncState() {
+    const state = this.checkedValue ? "checked" : "unchecked"
+
+    this.buttonTargets.forEach((btn) => {
+      btn.dataset.state = state
+      btn.setAttribute("aria-checked", String(this.checkedValue))
+    })
+
+    this.thumbTargets.forEach((thumb) => {
+      thumb.dataset.state = state
+    })
+
+    this.inputTargets.forEach((input) => {
+      input.value = this.checkedValue ? "1" : "0"
+      input.checked = this.checkedValue
+    })
+  }
+}

data/js/controllers/tabs_controller.js

@@ -0,0 +1,96 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Replicates Radix Tabs behavior
+// Arrow key navigation, automatic activation, ARIA
+export default class extends Controller {
+  static targets = ["list", "trigger", "content"]
+  static values = {
+    value: { type: String, default: "" },
+    orientation: { type: String, default: "horizontal" },
+    activationMode: { type: String, default: "automatic" }, // "automatic" or "manual"
+  }
+
+  connect() {
+    // Auto-select first tab if no value set
+    if (!this.valueValue && this.triggerTargets.length > 0) {
+      this.valueValue = this.triggerTargets[0].dataset.value || ""
+    }
+    this._syncState()
+  }
+
+  select(event) {
+    const trigger = event.currentTarget
+    const value = trigger.dataset.value
+    if (value) this.valueValue = value
+  }
+
+  keydown(event) {
+    const triggers = this.triggerTargets
+    const current = triggers.indexOf(event.currentTarget)
+    if (current === -1) return
+
+    const isHorizontal = this.orientationValue === "horizontal"
+    const nextKey = isHorizontal ? "ArrowRight" : "ArrowDown"
+    const prevKey = isHorizontal ? "ArrowLeft" : "ArrowUp"
+    let nextIndex
+
+    switch (event.key) {
+      case nextKey:
+        event.preventDefault()
+        nextIndex = (current + 1) % triggers.length
+        triggers[nextIndex].focus()
+        if (this.activationModeValue === "automatic") {
+          this.valueValue = triggers[nextIndex].dataset.value
+        }
+        break
+      case prevKey:
+        event.preventDefault()
+        nextIndex = (current - 1 + triggers.length) % triggers.length
+        triggers[nextIndex].focus()
+        if (this.activationModeValue === "automatic") {
+          this.valueValue = triggers[nextIndex].dataset.value
+        }
+        break
+      case "Home":
+        event.preventDefault()
+        triggers[0].focus()
+        if (this.activationModeValue === "automatic") {
+          this.valueValue = triggers[0].dataset.value
+        }
+        break
+      case "End":
+        event.preventDefault()
+        const last = triggers[triggers.length - 1]
+        last.focus()
+        if (this.activationModeValue === "automatic") {
+          this.valueValue = last.dataset.value
+        }
+        break
+      case "Enter":
+      case " ":
+        if (this.activationModeValue === "manual") {
+          event.preventDefault()
+          this.valueValue = event.currentTarget.dataset.value
+        }
+        break
+    }
+  }
+
+  valueValueChanged() { this._syncState() }
+
+  _syncState() {
+    this.triggerTargets.forEach((trigger) => {
+      const isActive = trigger.dataset.value === this.valueValue
+      trigger.dataset.state = isActive ? "active" : "inactive"
+      trigger.setAttribute("aria-selected", String(isActive))
+      trigger.setAttribute("tabindex", isActive ? "0" : "-1")
+    })
+
+    this.contentTargets.forEach((content) => {
+      const isActive = content.dataset.value === this.valueValue
+      content.dataset.state = isActive ? "active" : "inactive"
+      content.hidden = !isActive
+      content.setAttribute("tabindex", isActive ? "0" : "-1")
+    })
+  }
+}

data/js/controllers/toast_controller.js

@@ -0,0 +1,206 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Replicates Sonner toast behavior
+// Auto-dismiss, queue management, swipe to dismiss
+export default class extends Controller {
+  static targets = ["container", "toast"]
+  static values = {
+    position: { type: String, default: "bottom-right" },
+    duration: { type: Number, default: 5000 },
+    maxToasts: { type: Number, default: 5 },
+  }
+
+  connect() {
+    this._toasts = new Map()
+    this._counter = 0
+    this._hideTimeouts = []
+
+    // Listen for global toast events so buttons outside the controller scope can trigger toasts
+    this._globalShow = (e) => this.show(e)
+    this._globalSuccess = (e) => this.success(e)
+    this._globalError = (e) => this.error(e)
+    this._globalWarning = (e) => this.warning(e)
+    this._globalInfo = (e) => this.info(e)
+    document.addEventListener("toast:show", this._globalShow)
+    document.addEventListener("toast:success", this._globalSuccess)
+    document.addEventListener("toast:error", this._globalError)
+    document.addEventListener("toast:warning", this._globalWarning)
+    document.addEventListener("toast:info", this._globalInfo)
+  }
+
+  disconnect() {
+    this._toasts.forEach((timer) => clearTimeout(timer))
+    this._toasts.clear()
+    this._hideTimeouts.forEach(id => clearTimeout(id))
+    this._hideTimeouts = []
+    document.removeEventListener("toast:show", this._globalShow)
+    document.removeEventListener("toast:success", this._globalSuccess)
+    document.removeEventListener("toast:error", this._globalError)
+    document.removeEventListener("toast:warning", this._globalWarning)
+    document.removeEventListener("toast:info", this._globalInfo)
+  }
+
+  // Public API: works with event.detail (custom events) or event.params (Stimulus actions)
+  show(event) {
+    const data = event.detail || event.params || {}
+    const { title, description, variant = "default", duration, action } = data
+    this._addToast({ title, description, variant, duration: duration || this.durationValue, action })
+  }
+
+  success(event) {
+    const data = event.detail || event.params || {}
+    this._addToast({ ...data, variant: "success", duration: data.duration || this.durationValue })
+  }
+
+  error(event) {
+    const data = event.detail || event.params || {}
+    this._addToast({ ...data, variant: "error", duration: data.duration || this.durationValue })
+  }
+
+  warning(event) {
+    const data = event.detail || event.params || {}
+    this._addToast({ ...data, variant: "warning", duration: data.duration || this.durationValue })
+  }
+
+  info(event) {
+    const data = event.detail || event.params || {}
+    this._addToast({ ...data, variant: "info", duration: data.duration || this.durationValue })
+  }
+
+  dismiss(event) {
+    const toast = event.currentTarget.closest('[data-slot="toast"]')
+    if (toast) this._removeToast(toast)
+  }
+
+  _addToast({ title, description, variant, duration, action }) {
+    const id = `toast-${++this._counter}`
+    const container = this.hasContainerTarget ? this.containerTarget : this.element
+
+    // Enforce max toasts
+    const existing = container.querySelectorAll('[data-slot="toast"]')
+    if (existing.length >= this.maxToastsValue) {
+      this._removeToast(existing[0])
+    }
+
+    const toast = document.createElement("div")
+    toast.dataset.slot = "toast"
+    toast.dataset.variant = variant
+    toast.dataset.state = "open"
+    toast.id = id
+    toast.setAttribute("role", "alert")
+    toast.className = this._getToastClasses(variant)
+
+    let html = '<div class="grid gap-1">'
+    if (title) html += `<div data-slot="toast-title" class="text-sm font-semibold">${this._escapeHtml(title)}</div>`
+    if (description) html += `<div data-slot="toast-description" class="text-sm opacity-90">${this._escapeHtml(description)}</div>`
+    html += "</div>"
+
+    if (action) {
+      html += `<button data-slot="toast-action" class="inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary">${this._escapeHtml(action.label)}</button>`
+    }
+
+    // Close button
+    html += `<button data-action="shadcn--toast#dismiss" class="absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity group-hover:opacity-100 hover:text-foreground">
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="size-4"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+    </button>`
+
+    toast.innerHTML = html
+
+    // Add action handler
+    if (action?.handler) {
+      const actionBtn = toast.querySelector('[data-slot="toast-action"]')
+      if (actionBtn) {
+        actionBtn.addEventListener("click", () => {
+          action.handler()
+          this._removeToast(toast)
+        })
+      }
+    }
+
+    // Swipe to dismiss
+    this._addSwipeToDismiss(toast)
+
+    container.appendChild(toast)
+
+    // Auto-dismiss
+    if (duration > 0) {
+      const timer = setTimeout(() => this._removeToast(toast), duration)
+      this._toasts.set(id, timer)
+    }
+
+    // Pause on hover
+    toast.addEventListener("mouseenter", () => {
+      const timer = this._toasts.get(id)
+      if (timer) clearTimeout(timer)
+    })
+    toast.addEventListener("mouseleave", () => {
+      if (duration > 0) {
+        const timer = setTimeout(() => this._removeToast(toast), duration)
+        this._toasts.set(id, timer)
+      }
+    })
+  }
+
+  _removeToast(toast) {
+    const id = toast.id
+    const timer = this._toasts.get(id)
+    if (timer) clearTimeout(timer)
+    this._toasts.delete(id)
+
+    toast.dataset.state = "closed"
+    toast.style.transition = "opacity 200ms, transform 200ms"
+    toast.style.opacity = "0"
+    toast.style.transform = "translateX(100%)"
+
+    this._hideTimeouts.push(setTimeout(() => toast.remove(), 200))
+  }
+
+  _addSwipeToDismiss(toast) {
+    let startX = 0
+    let currentX = 0
+
+    toast.addEventListener("pointerdown", (e) => {
+      startX = e.clientX
+      toast.style.transition = "none"
+    })
+
+    toast.addEventListener("pointermove", (e) => {
+      if (!startX) return
+      currentX = e.clientX - startX
+      if (currentX > 0) {
+        toast.style.transform = `translateX(${currentX}px)`
+        toast.style.opacity = String(1 - currentX / 200)
+      }
+    })
+
+    toast.addEventListener("pointerup", () => {
+      if (currentX > 100) {
+        this._removeToast(toast)
+      } else {
+        toast.style.transition = "transform 200ms, opacity 200ms"
+        toast.style.transform = ""
+        toast.style.opacity = ""
+      }
+      startX = 0
+      currentX = 0
+    })
+  }
+
+  _getToastClasses(variant) {
+    const base = "group pointer-events-auto relative flex w-full items-center justify-between gap-4 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all"
+    const variants = {
+      default: "border bg-background text-foreground",
+      success: "border-green-500/50 bg-green-50 text-green-900 dark:bg-green-950 dark:text-green-100",
+      error: "border-destructive/50 bg-destructive text-white",
+      warning: "border-yellow-500/50 bg-yellow-50 text-yellow-900 dark:bg-yellow-950 dark:text-yellow-100",
+      info: "border-blue-500/50 bg-blue-50 text-blue-900 dark:bg-blue-950 dark:text-blue-100",
+    }
+    return `${base} ${variants[variant] || variants.default}`
+  }
+
+  _escapeHtml(str) {
+    const div = document.createElement("div")
+    div.textContent = str
+    return div.innerHTML
+  }
+}

data/js/controllers/toggle_controller.js

@@ -0,0 +1,30 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Replicates Radix Toggle behavior
+export default class extends Controller {
+  static targets = ["button"]
+  static values = {
+    pressed: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+  }
+
+  connect() {
+    this._syncState()
+  }
+
+  toggle() {
+    if (this.disabledValue) return
+    this.pressedValue = !this.pressedValue
+    this.dispatch("change", { detail: { pressed: this.pressedValue } })
+  }
+
+  pressedValueChanged() { this._syncState() }
+
+  _syncState() {
+    const state = this.pressedValue ? "on" : "off"
+    this.buttonTargets.forEach((btn) => {
+      btn.dataset.state = state
+      btn.setAttribute("aria-pressed", String(this.pressedValue))
+    })
+  }
+}