@skutally/ui-library 0.1.0

package/src/controllers/badge.js

@@ -0,0 +1,40 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    variant: { type: String, default: "default" },
+    dot: { type: Boolean, default: false },
+  }
+
+  connect() {
+    this.applyVariant()
+    if (this.dotValue) this.prependDot()
+  }
+
+  applyVariant() {
+    const base = "inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors"
+    const map = {
+      default:     "bg-primary text-primary-foreground",
+      secondary:   "bg-muted text-muted-foreground",
+      success:     "bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-300",
+      warning:     "bg-amber-100 text-amber-700 dark:bg-amber-900 dark:text-amber-300",
+      danger:      "bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-300",
+      info:        "bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-300",
+      outline:     "bg-transparent border border-border text-foreground",
+    }
+    this.element.className = `${base} ${map[this.variantValue] ?? map.default}`
+  }
+
+  prependDot() {
+    if (this.element.querySelector("[data-badge-dot]")) return
+    const dot = document.createElement("span")
+    dot.setAttribute("data-badge-dot", "")
+    const colors = {
+      default: "bg-primary-foreground", secondary: "bg-muted-foreground",
+      success: "bg-emerald-500", warning: "bg-amber-500",
+      danger: "bg-red-500", info: "bg-blue-500", outline: "bg-foreground",
+    }
+    dot.className = `w-1.5 h-1.5 rounded-full ${colors[this.variantValue] ?? colors.default}`
+    this.element.prepend(dot)
+  }
+}

package/src/controllers/button.js

@@ -0,0 +1,79 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    variant:     { type: String,  default: "default" },
+    size:        { type: String,  default: "default" },
+    loading:     { type: Boolean, default: false },
+    loadingText: { type: String,  default: "Loading..." },
+    clickable:   { type: Boolean, default: false },
+  }
+
+  connect() {
+    this._originalHTML = this.element.innerHTML
+    this.applyBase()
+    this.applyVariant()
+    this.applySize()
+    if (this.loadingValue) this.setLoading(true)
+    if (this.clickableValue) {
+      this.element.addEventListener("click", () => this.handleClick())
+    }
+  }
+
+  applyBase() {
+    this.element.classList.add(
+      "inline-flex", "items-center", "justify-center", "gap-2",
+      "whitespace-nowrap", "rounded-md", "text-sm", "font-medium",
+      "transition-colors", "cursor-pointer", "focus-visible:outline-none",
+      "focus-visible:ring-2", "focus-visible:ring-ring", "focus-visible:ring-offset-2",
+      "disabled:pointer-events-none", "disabled:opacity-50"
+    )
+  }
+
+  applyVariant() {
+    const map = {
+      default:     ["bg-primary", "text-primary-foreground", "hover:bg-primary/90"],
+      destructive: ["bg-red-600", "text-white", "hover:bg-red-700", "dark:bg-red-700", "dark:hover:bg-red-800"],
+      outline:     ["border", "border-border", "bg-background", "hover:bg-accent", "hover:text-accent-foreground"],
+      secondary:   ["bg-muted", "text-foreground", "hover:bg-muted/80"],
+      ghost:       ["hover:bg-accent", "hover:text-accent-foreground"],
+      link:        ["text-primary", "underline-offset-4", "hover:underline"],
+      success:     ["bg-emerald-600", "text-white", "hover:bg-emerald-700"],
+      warning:     ["bg-amber-500", "text-white", "hover:bg-amber-600"],
+    }
+    this.element.classList.add(...(map[this.variantValue] ?? map.default))
+  }
+
+  applySize() {
+    const map = {
+      xs:      ["h-7", "px-2.5", "text-xs", "rounded"],
+      sm:      ["h-8", "px-3", "text-xs", "rounded-md"],
+      default: ["h-9", "px-4", "py-2"],
+      lg:      ["h-11", "px-6", "text-base"],
+      xl:      ["h-12", "px-8", "text-lg", "rounded-lg"],
+      icon:    ["h-9", "w-9", "p-0"],
+    }
+    this.element.classList.add(...(map[this.sizeValue] ?? map.default))
+  }
+
+  setLoading(on) {
+    if (on) {
+      this.element.disabled = true
+      this.element.innerHTML = `
+        <svg class="animate-spin h-4 w-4 shrink-0" viewBox="0 0 24 24" fill="none">
+          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" class="opacity-25"/>
+          <path d="M4 12a8 8 0 018-8V0C5.3 0 0 5.3 0 12h4z" fill="currentColor" class="opacity-75"/>
+        </svg>
+        ${this.loadingTextValue}`
+    } else {
+      this.element.disabled = false
+      this.element.innerHTML = this._originalHTML
+    }
+  }
+
+  handleClick() {
+    if (this.element.disabled) return
+    this.setLoading(true)
+    setTimeout(() => this.setLoading(false), 2000)
+  }
+}

package/src/controllers/card.js

@@ -0,0 +1,10 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  connect() {
+    this.element.classList.add(
+      "rounded-lg", "border", "border-border", "bg-card",
+      "text-card-foreground", "shadow-sm"
+    )
+  }
+}

package/src/controllers/checkbox.js

@@ -0,0 +1,33 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["icon"]
+  static values = {
+    checked: { type: Boolean, default: false },
+  }
+
+  connect() {
+    this.render()
+  }
+
+  toggle() {
+    this.checkedValue = !this.checkedValue
+    this.render()
+    this.dispatch("change", { detail: { checked: this.checkedValue } })
+  }
+
+  render() {
+    const on = this.checkedValue
+    const box = this.element.querySelector("[role=checkbox]")
+    if (box) {
+      box.setAttribute("aria-checked", on)
+      box.classList.toggle("bg-primary", on)
+      box.classList.toggle("text-primary-foreground", on)
+      box.classList.toggle("border-primary", on)
+      box.classList.toggle("border-border", !on)
+    }
+    if (this.hasIconTarget) {
+      this.iconTarget.classList.toggle("hidden", !on)
+    }
+  }
+}

package/src/controllers/dropdown.js

@@ -0,0 +1,35 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["menu"]
+
+  connect() {
+    this._outside = (e) => { if (!this.element.contains(e.target)) this.close() }
+    this._escape  = (e) => { if (e.key === "Escape") this.close() }
+    document.addEventListener("click", this._outside)
+    document.addEventListener("keydown", this._escape)
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this._outside)
+    document.removeEventListener("keydown", this._escape)
+  }
+
+  toggle() {
+    this.menuTarget.classList.contains("hidden") ? this.open() : this.close()
+  }
+
+  open() {
+    this.menuTarget.classList.remove("hidden")
+    requestAnimationFrame(() => {
+      this.menuTarget.classList.remove("opacity-0", "scale-95")
+      this.menuTarget.classList.add("opacity-100", "scale-100")
+    })
+  }
+
+  close() {
+    this.menuTarget.classList.add("opacity-0", "scale-95")
+    this.menuTarget.classList.remove("opacity-100", "scale-100")
+    setTimeout(() => this.menuTarget.classList.add("hidden"), 100)
+  }
+}

package/src/controllers/input.js

@@ -0,0 +1,24 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static values = {
+    variant: { type: String, default: "default" },
+    icon: { type: Boolean, default: false },
+  }
+
+  connect() {
+    this.applyVariant()
+  }
+
+  applyVariant() {
+    const base = "flex h-10 w-full rounded-md border px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+    const map = {
+      default: "border-border bg-background",
+      error:   "border-red-400 bg-red-50 text-red-900 focus-visible:ring-red-300 dark:bg-red-950 dark:text-red-200 dark:border-red-800",
+      success: "border-emerald-400 bg-emerald-50 text-emerald-900 focus-visible:ring-emerald-300 dark:bg-emerald-950 dark:text-emerald-200 dark:border-emerald-800",
+    }
+    const variant = map[this.variantValue] ?? map.default
+    const iconPad = this.iconValue ? "pl-9" : ""
+    this.element.className = `${base} ${variant} ${iconPad}`.trim()
+  }
+}

package/src/controllers/modal.js

@@ -0,0 +1,39 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["overlay", "box"]
+
+  connect() {
+    this._key = (e) => { if (e.key === "Escape") this.close() }
+    document.addEventListener("keydown", this._key)
+  }
+
+  disconnect() {
+    document.removeEventListener("keydown", this._key)
+  }
+
+  open() {
+    this.overlayTarget.classList.remove("hidden")
+    document.body.style.overflow = "hidden"
+    requestAnimationFrame(() => {
+      this.overlayTarget.classList.remove("opacity-0")
+      this.boxTarget.classList.remove("scale-95", "opacity-0")
+      this.boxTarget.classList.add("scale-100", "opacity-100")
+      this.boxTarget.querySelector("button, input")?.focus()
+    })
+  }
+
+  close() {
+    this.overlayTarget.classList.add("opacity-0")
+    this.boxTarget.classList.add("scale-95", "opacity-0")
+    this.boxTarget.classList.remove("scale-100", "opacity-100")
+    setTimeout(() => {
+      this.overlayTarget.classList.add("hidden")
+      document.body.style.overflow = ""
+    }, 200)
+  }
+
+  backdrop(e) {
+    if (e.target === this.overlayTarget) this.close()
+  }
+}

package/src/controllers/popover.js

@@ -0,0 +1,35 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["content"]
+
+  connect() {
+    this._outside = (e) => { if (!this.element.contains(e.target)) this.close() }
+    this._escape  = (e) => { if (e.key === "Escape") this.close() }
+    document.addEventListener("click", this._outside)
+    document.addEventListener("keydown", this._escape)
+  }
+
+  disconnect() {
+    document.removeEventListener("click", this._outside)
+    document.removeEventListener("keydown", this._escape)
+  }
+
+  toggle() {
+    this.contentTarget.classList.contains("hidden") ? this.open() : this.close()
+  }
+
+  open() {
+    this.contentTarget.classList.remove("hidden")
+    requestAnimationFrame(() => {
+      this.contentTarget.classList.remove("opacity-0", "scale-95")
+      this.contentTarget.classList.add("opacity-100", "scale-100")
+    })
+  }
+
+  close() {
+    this.contentTarget.classList.add("opacity-0", "scale-95")
+    this.contentTarget.classList.remove("opacity-100", "scale-100")
+    setTimeout(() => this.contentTarget.classList.add("hidden"), 100)
+  }
+}

package/src/controllers/progress.js

@@ -0,0 +1,22 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["bar"]
+  static values = {
+    value: { type: Number, default: 0 },
+  }
+
+  connect() {
+    this.render()
+  }
+
+  render() {
+    const pct = Math.min(100, Math.max(0, this.valueValue))
+    this.barTarget.style.width = `${pct}%`
+    this.element.setAttribute("aria-valuenow", pct)
+  }
+
+  valueValueChanged() {
+    this.render()
+  }
+}

package/src/controllers/radio.js

@@ -0,0 +1,30 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["option", "dot"]
+  static values = {
+    selected: { type: Number, default: -1 },
+  }
+
+  connect() {
+    if (this.selectedValue >= 0) this.render()
+  }
+
+  select(e) {
+    this.selectedValue = this.optionTargets.indexOf(e.currentTarget)
+    this.render()
+    this.dispatch("change", { detail: { selected: this.selectedValue } })
+  }
+
+  render() {
+    this.optionTargets.forEach((opt, i) => {
+      const active = i === this.selectedValue
+      const ring = opt.querySelector("[data-radio-target='dot']")
+      if (ring) {
+        ring.classList.toggle("border-primary", active)
+        const inner = ring.querySelector("span")
+        if (inner) inner.classList.toggle("hidden", !active)
+      }
+    })
+  }
+}

package/src/controllers/sheet.js

@@ -0,0 +1,37 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["overlay", "panel"]
+  static values = {
+    side: { type: String, default: "right" },
+  }
+
+  open() {
+    this.overlayTarget.classList.remove("hidden")
+    document.body.style.overflow = "hidden"
+    requestAnimationFrame(() => {
+      this.overlayTarget.classList.remove("opacity-0")
+      this.panelTarget.classList.remove(this._hiddenTransform())
+      this.panelTarget.classList.add("translate-x-0", "translate-y-0")
+    })
+  }
+
+  close() {
+    this.overlayTarget.classList.add("opacity-0")
+    this.panelTarget.classList.remove("translate-x-0", "translate-y-0")
+    this.panelTarget.classList.add(this._hiddenTransform())
+    setTimeout(() => {
+      this.overlayTarget.classList.add("hidden")
+      document.body.style.overflow = ""
+    }, 300)
+  }
+
+  backdrop(e) {
+    if (e.target === this.overlayTarget) this.close()
+  }
+
+  _hiddenTransform() {
+    const map = { right: "translate-x-full", left: "-translate-x-full", top: "-translate-y-full", bottom: "translate-y-full" }
+    return map[this.sideValue] || "translate-x-full"
+  }
+}

package/src/controllers/slider.js

@@ -0,0 +1,57 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["track", "fill", "thumb", "output"]
+  static values = {
+    min:  { type: Number, default: 0 },
+    max:  { type: Number, default: 100 },
+    val:  { type: Number, default: 50 },
+    step: { type: Number, default: 1 },
+  }
+
+  connect() {
+    this._dragging = false
+    this._onMove = (e) => this._handleMove(e)
+    this._onUp   = () => this._handleUp()
+    this.render()
+  }
+
+  startDrag(e) {
+    e.preventDefault()
+    this._dragging = true
+    document.addEventListener("mousemove", this._onMove)
+    document.addEventListener("mouseup", this._onUp)
+    document.addEventListener("touchmove", this._onMove)
+    document.addEventListener("touchend", this._onUp)
+    this._handleMove(e)
+  }
+
+  _handleMove(e) {
+    if (!this._dragging) return
+    const rect = this.trackTarget.getBoundingClientRect()
+    const clientX = e.touches ? e.touches[0].clientX : e.clientX
+    let pct = (clientX - rect.left) / rect.width
+    pct = Math.max(0, Math.min(1, pct))
+    const range = this.maxValue - this.minValue
+    let val = this.minValue + pct * range
+    val = Math.round(val / this.stepValue) * this.stepValue
+    this.valValue = Math.max(this.minValue, Math.min(this.maxValue, val))
+    this.render()
+    this.dispatch("change", { detail: { value: this.valValue } })
+  }
+
+  _handleUp() {
+    this._dragging = false
+    document.removeEventListener("mousemove", this._onMove)
+    document.removeEventListener("mouseup", this._onUp)
+    document.removeEventListener("touchmove", this._onMove)
+    document.removeEventListener("touchend", this._onUp)
+  }
+
+  render() {
+    const pct = ((this.valValue - this.minValue) / (this.maxValue - this.minValue)) * 100
+    if (this.hasFillTarget) this.fillTarget.style.width = `${pct}%`
+    if (this.hasThumbTarget) this.thumbTarget.style.left = `${pct}%`
+    if (this.hasOutputTarget) this.outputTarget.textContent = this.valValue
+  }
+}

package/src/controllers/table.js

@@ -0,0 +1,31 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["header", "body"]
+
+  sort(e) {
+    const th = e.currentTarget
+    const col = parseInt(th.dataset.col)
+    const dir = th.dataset.dir === "asc" ? "desc" : "asc"
+
+    // Reset all headers
+    this.headerTargets.forEach(h => { h.dataset.dir = ""; h.querySelector("[data-sort-icon]")?.classList.add("opacity-0") })
+    th.dataset.dir = dir
+    const icon = th.querySelector("[data-sort-icon]")
+    if (icon) {
+      icon.classList.remove("opacity-0")
+      icon.style.transform = dir === "desc" ? "rotate(180deg)" : ""
+    }
+
+    const rows = Array.from(this.bodyTarget.querySelectorAll("tr"))
+    rows.sort((a, b) => {
+      const aVal = a.children[col]?.textContent.trim() ?? ""
+      const bVal = b.children[col]?.textContent.trim() ?? ""
+      const aNum = parseFloat(aVal.replace(/[^0-9.-]/g, ""))
+      const bNum = parseFloat(bVal.replace(/[^0-9.-]/g, ""))
+      if (!isNaN(aNum) && !isNaN(bNum)) return dir === "asc" ? aNum - bNum : bNum - aNum
+      return dir === "asc" ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal)
+    })
+    rows.forEach(r => this.bodyTarget.appendChild(r))
+  }
+}

package/src/controllers/tabs.js

@@ -0,0 +1,29 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["tab", "panel"]
+
+  connect() {
+    this.idx = 0
+    this.render()
+  }
+
+  switch(e) {
+    this.idx = this.tabTargets.indexOf(e.currentTarget)
+    this.render()
+  }
+
+  render() {
+    this.tabTargets.forEach((t, i) => {
+      const active = i === this.idx
+      t.classList.toggle("border-foreground", active)
+      t.classList.toggle("text-foreground", active)
+      t.classList.toggle("font-semibold", active)
+      t.classList.toggle("bg-background", active)
+      t.classList.toggle("border-transparent", !active)
+      t.classList.toggle("text-muted-foreground", !active)
+      t.classList.toggle("font-medium", !active)
+    })
+    this.panelTargets.forEach((p, i) => p.classList.toggle("hidden", i !== this.idx))
+  }
+}

package/src/controllers/toast.js

@@ -0,0 +1,41 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["container"]
+
+  show({ params: { type = "info", msg = "Notification" } }) {
+    const map = {
+      info:    { ring: "bg-background border-border text-foreground",               dot: "bg-blue-500" },
+      success: { ring: "bg-background border-border text-foreground",               dot: "bg-emerald-500" },
+      warning: { ring: "bg-background border-border text-foreground",               dot: "bg-amber-500" },
+      danger:  { ring: "bg-background border-border text-foreground",               dot: "bg-red-500" },
+    }
+    const cfg = map[type] ?? map.info
+    const el = document.createElement("div")
+    el.className = `flex items-center gap-3 px-4 py-3 rounded-lg border text-sm shadow-lg ${cfg.ring} transition-all duration-300 opacity-0 translate-y-2`
+    el.innerHTML = `
+      <span class="w-2 h-2 rounded-full shrink-0 ${cfg.dot}"></span>
+      <span class="flex-1">${this._escape(msg)}</span>
+      <button class="text-lg leading-none opacity-40 hover:opacity-80 ml-1 cursor-pointer">\u2715</button>`
+    el.querySelector("button").addEventListener("click", () => this._dismiss(el))
+    this.containerTarget.appendChild(el)
+    requestAnimationFrame(() => {
+      el.classList.replace("opacity-0", "opacity-100")
+      el.classList.replace("translate-y-2", "translate-y-0")
+    })
+    setTimeout(() => this._dismiss(el), 4000)
+  }
+
+  _dismiss(el) {
+    if (!el.parentNode) return
+    el.classList.replace("opacity-100", "opacity-0")
+    el.classList.add("-translate-y-1")
+    setTimeout(() => el.remove(), 300)
+  }
+
+  _escape(str) {
+    const div = document.createElement("div")
+    div.textContent = str
+    return div.innerHTML
+  }
+}

package/src/controllers/toggle.js

@@ -0,0 +1,27 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["track", "thumb"]
+  static values = {
+    checked: { type: Boolean, default: false },
+  }
+
+  connect() {
+    this.render()
+  }
+
+  flip() {
+    this.checkedValue = !this.checkedValue
+    this.render()
+    this.dispatch("change", { detail: { checked: this.checkedValue } })
+  }
+
+  render() {
+    const on = this.checkedValue
+    const btn = this.element.querySelector("[role=switch]")
+    if (btn) btn.setAttribute("aria-checked", on)
+    this.trackTarget.classList.toggle("bg-primary", on)
+    this.trackTarget.classList.toggle("bg-muted", !on)
+    this.thumbTarget.style.transform = on ? "translateX(20px)" : "translateX(0)"
+  }
+}

package/src/controllers/tooltip.js

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["content"]
+  static values = {
+    position: { type: String, default: "top" },
+  }
+
+  show() {
+    this.contentTarget.classList.remove("hidden", "opacity-0")
+    this.contentTarget.classList.add("opacity-100")
+  }
+
+  hide() {
+    this.contentTarget.classList.remove("opacity-100")
+    this.contentTarget.classList.add("opacity-0")
+    setTimeout(() => this.contentTarget.classList.add("hidden"), 150)
+  }
+}