shadcn-phlex 0.1.0

data/css/themes/stone.css

@@ -0,0 +1,62 @@
+/*
+ * shadcn theme: stone
+ * Compatible with ui.shadcn.com/themes — paste any theme here to swap.
+ */
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 75);
+  --foreground: oklch(0.147 0.004 49.25);
+  --card: oklch(1 0 75);
+  --card-foreground: oklch(0.147 0.004 49.25);
+  --popover: oklch(1 0 75);
+  --popover-foreground: oklch(0.147 0.004 49.25);
+  --primary: oklch(0.216 0.006 56.043);
+  --primary-foreground: oklch(0.985 0.001 106.423);
+  --secondary: oklch(0.97 0.001 106.424);
+  --secondary-foreground: oklch(0.216 0.006 56.043);
+  --muted: oklch(0.97 0.001 106.424);
+  --muted-foreground: oklch(0.553 0.013 58.071);
+  --accent: oklch(0.97 0.001 106.424);
+  --accent-foreground: oklch(0.216 0.006 56.043);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.923 0.003 48.717);
+  --input: oklch(0.923 0.003 48.717);
+  --ring: oklch(0.709 0.01 56.259);
+  --sidebar: oklch(0.985 0.001 106.423);
+  --sidebar-foreground: oklch(0.147 0.004 49.25);
+  --sidebar-primary: oklch(0.216 0.006 56.043);
+  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-accent: oklch(0.97 0.001 106.424);
+  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
+  --sidebar-border: oklch(0.923 0.003 48.717);
+  --sidebar-ring: oklch(0.709 0.01 56.259);
+}
+
+.dark {
+  --background: oklch(0.147 0.004 49.25);
+  --foreground: oklch(0.985 0.001 106.423);
+  --card: oklch(0.216 0.006 56.043);
+  --card-foreground: oklch(0.985 0.001 106.423);
+  --popover: oklch(0.216 0.006 56.043);
+  --popover-foreground: oklch(0.985 0.001 106.423);
+  --primary: oklch(0.923 0.003 48.717);
+  --primary-foreground: oklch(0.216 0.006 56.043);
+  --secondary: oklch(0.268 0.007 34.298);
+  --secondary-foreground: oklch(0.985 0.001 106.423);
+  --muted: oklch(0.268 0.007 34.298);
+  --muted-foreground: oklch(0.709 0.01 56.259);
+  --accent: oklch(0.268 0.007 34.298);
+  --accent-foreground: oklch(0.985 0.001 106.423);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.553 0.013 58.071);
+  --sidebar: oklch(0.216 0.006 56.043);
+  --sidebar-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.268 0.007 34.298);
+  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.553 0.013 58.071);
+}

data/css/themes/taupe.css

@@ -0,0 +1,62 @@
+/*
+ * shadcn theme: taupe
+ * Compatible with ui.shadcn.com/themes — paste any theme here to swap.
+ */
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.15 0.008 75);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.15 0.008 75);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.15 0.008 75);
+  --primary: oklch(0.218 0.012 75);
+  --primary-foreground: oklch(0.985 0.002 75);
+  --secondary: oklch(0.968 0.003 75);
+  --secondary-foreground: oklch(0.218 0.012 75);
+  --muted: oklch(0.968 0.003 75);
+  --muted-foreground: oklch(0.556 0.016 75);
+  --accent: oklch(0.968 0.003 75);
+  --accent-foreground: oklch(0.218 0.012 75);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.923 0.005 75);
+  --input: oklch(0.923 0.005 75);
+  --ring: oklch(0.708 0.014 75);
+  --sidebar: oklch(0.985 0.002 75);
+  --sidebar-foreground: oklch(0.15 0.008 75);
+  --sidebar-primary: oklch(0.218 0.012 75);
+  --sidebar-primary-foreground: oklch(0.985 0.002 75);
+  --sidebar-accent: oklch(0.968 0.003 75);
+  --sidebar-accent-foreground: oklch(0.218 0.012 75);
+  --sidebar-border: oklch(0.923 0.005 75);
+  --sidebar-ring: oklch(0.708 0.014 75);
+}
+
+.dark {
+  --background: oklch(0.15 0.008 75);
+  --foreground: oklch(0.985 0.002 75);
+  --card: oklch(0.218 0.012 75);
+  --card-foreground: oklch(0.985 0.002 75);
+  --popover: oklch(0.218 0.012 75);
+  --popover-foreground: oklch(0.985 0.002 75);
+  --primary: oklch(0.923 0.005 75);
+  --primary-foreground: oklch(0.218 0.012 75);
+  --secondary: oklch(0.274 0.012 75);
+  --secondary-foreground: oklch(0.985 0.002 75);
+  --muted: oklch(0.274 0.012 75);
+  --muted-foreground: oklch(0.708 0.014 75);
+  --accent: oklch(0.274 0.012 75);
+  --accent-foreground: oklch(0.985 0.002 75);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0.016 75);
+  --sidebar: oklch(0.218 0.012 75);
+  --sidebar-foreground: oklch(0.985 0.002 75);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.012 75);
+  --sidebar-accent-foreground: oklch(0.985 0.002 75);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0.016 75);
+}

data/css/themes/zinc.css

@@ -0,0 +1,62 @@
+/*
+ * shadcn theme: zinc
+ * Compatible with ui.shadcn.com/themes — paste any theme here to swap.
+ */
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.141 0.005 285.823);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0.002 247.839);
+  --secondary: oklch(0.967 0.001 264.542);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 264.542);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 264.542);
+  --accent-foreground: oklch(0.21 0.006 285.885);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 264.532);
+  --input: oklch(0.92 0.004 264.532);
+  --ring: oklch(0.705 0.015 286.067);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-accent: oklch(0.967 0.001 264.542);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 264.532);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
+}
+
+.dark {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0.002 247.839);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0.002 247.839);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0.002 247.839);
+  --primary: oklch(0.92 0.004 264.532);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0.002 247.839);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0.002 247.839);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.552 0.016 285.938);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
+}

data/js/controllers/accordion_controller.js

@@ -0,0 +1,135 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Replicates Radix Accordion behavior
+// Supports single (default) or multiple open items
+// data-type="single" | "multiple"
+// data-collapsible="true" allows closing all items in single mode
+export default class extends Controller {
+  static targets = ["item", "trigger", "content"]
+  static values = {
+    type: { type: String, default: "single" },
+    collapsible: { type: Boolean, default: false },
+  }
+
+  connect() {
+    this.itemTargets.forEach((item) => {
+      const content = item.querySelector('[data-slot="accordion-content"]')
+      if (content && item.dataset.state !== "open") {
+        content.hidden = true
+        content.dataset.state = "closed"
+      } else if (content && item.dataset.state === "open") {
+        content.hidden = false
+        content.dataset.state = "open"
+      }
+    })
+  }
+
+  toggle(event) {
+    const trigger = event.currentTarget
+    const item = trigger.closest('[data-slot="accordion-item"]')
+    if (!item) return
+
+    const isOpen = item.dataset.state === "open"
+
+    if (this.typeValue === "single") {
+      // Close all other items
+      this.itemTargets.forEach((otherItem) => {
+        if (otherItem !== item && otherItem.dataset.state === "open") {
+          this._closeItem(otherItem)
+        }
+      })
+    }
+
+    if (isOpen && (this.collapsibleValue || this.typeValue === "multiple")) {
+      this._closeItem(item)
+    } else if (!isOpen) {
+      this._openItem(item)
+    }
+  }
+
+  keydown(event) {
+    const triggers = this.triggerTargets
+    const index = triggers.indexOf(event.currentTarget)
+    let nextIndex
+
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault()
+        nextIndex = (index + 1) % triggers.length
+        triggers[nextIndex].focus()
+        break
+      case "ArrowUp":
+        event.preventDefault()
+        nextIndex = (index - 1 + triggers.length) % triggers.length
+        triggers[nextIndex].focus()
+        break
+      case "Home":
+        event.preventDefault()
+        triggers[0].focus()
+        break
+      case "End":
+        event.preventDefault()
+        triggers[triggers.length - 1].focus()
+        break
+    }
+  }
+
+  _openItem(item) {
+    const content = item.querySelector('[data-slot="accordion-content"]')
+    const trigger = item.querySelector('[data-slot="accordion-trigger"]')
+    if (!content) return
+
+    item.dataset.state = "open"
+    if (trigger) {
+      trigger.dataset.state = "open"
+      trigger.setAttribute("aria-expanded", "true")
+    }
+    content.dataset.state = "open"
+    content.hidden = false
+
+    // Animate open
+    const height = content.scrollHeight
+    content.style.height = "0px"
+    content.style.overflow = "hidden"
+    requestAnimationFrame(() => {
+      content.style.transition = "height 200ms ease-out"
+      content.style.height = `${height}px`
+      const onEnd = () => {
+        content.style.height = ""
+        content.style.overflow = ""
+        content.style.transition = ""
+        content.removeEventListener("transitionend", onEnd)
+      }
+      content.addEventListener("transitionend", onEnd)
+    })
+  }
+
+  _closeItem(item) {
+    const content = item.querySelector('[data-slot="accordion-content"]')
+    const trigger = item.querySelector('[data-slot="accordion-trigger"]')
+    if (!content) return
+
+    // Animate close
+    const height = content.scrollHeight
+    content.style.height = `${height}px`
+    content.style.overflow = "hidden"
+    requestAnimationFrame(() => {
+      content.style.transition = "height 200ms ease-out"
+      content.style.height = "0px"
+      const onEnd = () => {
+        content.hidden = true
+        content.style.height = ""
+        content.style.overflow = ""
+        content.style.transition = ""
+        item.dataset.state = "closed"
+        if (trigger) {
+          trigger.dataset.state = "closed"
+          trigger.setAttribute("aria-expanded", "false")
+        }
+        content.dataset.state = "closed"
+        content.removeEventListener("transitionend", onEnd)
+      }
+      content.addEventListener("transitionend", onEnd)
+    })
+  }
+}

data/js/controllers/checkbox_controller.js

@@ -0,0 +1,52 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Replicates Radix Checkbox behavior
+// Toggle checked/unchecked/indeterminate, updates hidden input for forms
+export default class extends Controller {
+  static targets = ["button", "indicator", "input"]
+  static values = {
+    checked: { type: String, default: "false" }, // "true", "false", "indeterminate"
+    disabled: { type: Boolean, default: false },
+    name: String,
+  }
+
+  connect() {
+    this._syncState()
+  }
+
+  toggle() {
+    if (this.disabledValue) return
+
+    if (this.checkedValue === "true") {
+      this.checkedValue = "false"
+    } else {
+      this.checkedValue = "true"
+    }
+
+    this.dispatch("change", { detail: { checked: this.checkedValue === "true" } })
+  }
+
+  checkedValueChanged() { this._syncState() }
+
+  _syncState() {
+    const isChecked = this.checkedValue === "true"
+    const isIndeterminate = this.checkedValue === "indeterminate"
+    const state = isIndeterminate ? "indeterminate" : isChecked ? "checked" : "unchecked"
+
+    this.buttonTargets.forEach((btn) => {
+      btn.dataset.state = state
+      btn.setAttribute("aria-checked", isIndeterminate ? "mixed" : String(isChecked))
+      btn.setAttribute("data-disabled", String(this.disabledValue))
+    })
+
+    this.indicatorTargets.forEach((ind) => {
+      ind.hidden = !isChecked && !isIndeterminate
+    })
+
+    // Update hidden input for form submission
+    this.inputTargets.forEach((input) => {
+      input.value = isChecked ? "1" : "0"
+      input.checked = isChecked
+    })
+  }
+}

data/js/controllers/collapsible_controller.js

@@ -0,0 +1,85 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Replicates Radix Collapsible behavior
+export default class extends Controller {
+  static targets = ["trigger", "content"]
+  static values = {
+    open: { type: Boolean, default: false },
+  }
+
+  connect() {
+    this._syncState()
+  }
+
+  toggle() {
+    this.openValue = !this.openValue
+  }
+
+  open() {
+    this.openValue = true
+  }
+
+  close() {
+    this.openValue = false
+  }
+
+  openValueChanged() {
+    this._syncState()
+  }
+
+  _syncState() {
+    const state = this.openValue ? "open" : "closed"
+    this.element.dataset.state = state
+
+    this.triggerTargets.forEach((trigger) => {
+      trigger.dataset.state = state
+      trigger.setAttribute("aria-expanded", String(this.openValue))
+    })
+
+    this.contentTargets.forEach((content) => {
+      if (this.openValue) {
+        this._animateOpen(content)
+      } else {
+        this._animateClose(content)
+      }
+    })
+  }
+
+  _animateOpen(content) {
+    content.hidden = false
+    content.dataset.state = "open"
+    const height = content.scrollHeight
+    content.style.height = "0px"
+    content.style.overflow = "hidden"
+    requestAnimationFrame(() => {
+      content.style.transition = "height 200ms ease-out"
+      content.style.height = `${height}px`
+      const onEnd = () => {
+        content.style.height = ""
+        content.style.overflow = ""
+        content.style.transition = ""
+        content.removeEventListener("transitionend", onEnd)
+      }
+      content.addEventListener("transitionend", onEnd)
+    })
+  }
+
+  _animateClose(content) {
+    const height = content.scrollHeight
+    content.dataset.state = "closed"
+    content.style.height = `${height}px`
+    content.style.overflow = "hidden"
+    requestAnimationFrame(() => {
+      content.style.transition = "height 200ms ease-out"
+      content.style.height = "0px"
+      const onEnd = () => {
+        content.hidden = true
+        content.style.height = ""
+        content.style.overflow = ""
+        content.style.transition = ""
+        content.removeEventListener("transitionend", onEnd)
+      }
+      content.addEventListener("transitionend", onEnd)
+    })
+  }
+}

data/js/controllers/combobox_controller.js

@@ -0,0 +1,168 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Combobox: filterable select with search input
+// Uses Stimulus declarative click@window for outside click (no flicker)
+export default class extends Controller {
+  static targets = ["input", "content", "item", "empty", "hiddenInput", "value"]
+  static values = {
+    open: { type: Boolean, default: false },
+    value: { type: String, default: "" },
+    placeholder: { type: String, default: "Search..." },
+    emptyText: { type: String, default: "No results found." },
+  }
+
+  connect() {
+    this._hideTimeouts = []
+    this._allItems = this.itemTargets.map((el) => ({
+      element: el,
+      value: el.dataset.value || "",
+      label: el.textContent.trim().toLowerCase(),
+    }))
+    this.contentTargets.forEach((el) => { el.dataset.state = "closed"; el.hidden = true })
+  }
+
+  disconnect() {
+    this._hideTimeouts.forEach(id => clearTimeout(id))
+    this._hideTimeouts = []
+  }
+
+  toggle() { this.openValue = !this.openValue }
+
+  // Wired as click@window->shadcn--combobox#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--combobox#hideOnEscape
+  hideOnEscape() {
+    if (!this.openValue) return
+    this.openValue = false
+  }
+
+  close() { this.openValue = false }
+
+  filter(event) {
+    const query = event.currentTarget.value.toLowerCase()
+    let visibleCount = 0
+
+    this._allItems.forEach(({ element, label }) => {
+      const match = label.includes(query)
+      element.hidden = !match
+      if (match) visibleCount++
+    })
+
+    this.emptyTargets.forEach((el) => { el.hidden = visibleCount > 0 })
+  }
+
+  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 })
+    this.inputTargets.forEach((el) => { el.value = "" })
+
+    this.dispatch("change", { detail: { value, label } })
+    this.openValue = false
+  }
+
+  keydown(event) {
+    if (!this.openValue && (event.key === "ArrowDown" || event.key === "Enter")) {
+      event.preventDefault()
+      this.openValue = true
+      return
+    }
+    if (event.key === "Escape") { this.openValue = false; return }
+
+    const items = this._getVisibleItems()
+    const current = items.indexOf(document.activeElement)
+
+    switch (event.key) {
+      case "ArrowDown":
+        event.preventDefault()
+        if (current < items.length - 1) items[current + 1]?.focus()
+        else if (current === -1 && items.length > 0) items[0].focus()
+        break
+      case "ArrowUp":
+        event.preventDefault()
+        if (current > 0) items[current - 1]?.focus()
+        else if (this.hasInputTarget) this.inputTarget.focus()
+        break
+      case "Enter":
+        if (document.activeElement?.matches('[data-slot*="item"]')) {
+          event.preventDefault()
+          document.activeElement.click()
+        }
+        break
+    }
+  }
+
+  openValueChanged() {
+    if (!this._hideTimeouts) return
+    this._render()
+  }
+
+  valueValueChanged() { this._syncValueState() }
+
+  _render() {
+    const open = this.openValue
+
+    this._hideTimeouts.forEach(id => clearTimeout(id))
+    this._hideTimeouts = []
+
+    this.contentTargets.forEach((el) => {
+      if (open) {
+        el.getAnimations().forEach(a => a.cancel())
+        el.hidden = false
+        el.dataset.state = "open"
+        requestAnimationFrame(() => {
+          this._position(el)
+          if (this.hasInputTarget) this.inputTarget.focus()
+        })
+      } else {
+        el.dataset.state = "closed"
+        // Reset filter
+        this._allItems.forEach(({ element }) => { element.hidden = false })
+        this.emptyTargets.forEach((em) => { em.hidden = true })
+
+        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
+        }
+      }
+    })
+  }
+
+  _syncValueState() {
+    this.itemTargets.forEach((item) => {
+      const isSelected = item.dataset.value === this.valueValue
+      item.dataset.state = isSelected ? "checked" : "unchecked"
+      item.setAttribute("aria-selected", String(isSelected))
+    })
+    this.hiddenInputTargets.forEach((input) => { input.value = this.valueValue })
+  }
+
+  _position(content) {
+    // Use the trigger for positioning, not the root (which expands when content is visible)
+    const trigger = this.element.querySelector('[data-slot="combobox-trigger"]') || this.element
+    const rect = trigger.getBoundingClientRect()
+    content.style.position = "fixed"
+    content.style.zIndex = "50"
+    content.style.width = `${Math.max(rect.width, 200)}px`
+    content.style.top = `${rect.bottom + 4}px`
+    content.style.left = `${rect.left}px`
+  }
+
+  _getVisibleItems() {
+    return this.itemTargets.filter((el) => !el.hidden && !el.dataset.disabled)
+  }
+}