shadcn-rails 0.1.0

data/app/assets/javascripts/shadcn/controllers/slider_controller.js

@@ -0,0 +1,364 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Slider Controller
+ *
+ * Handles slider value selection with drag and keyboard support
+ *
+ * Targets:
+ * - track: The slider track
+ * - range: The filled range portion
+ * - thumb: The draggable thumb
+ * - input: Hidden input for form submission
+ * - output: Optional element to display the current value (auto-synced)
+ *
+ * Values:
+ * - min: Minimum value
+ * - max: Maximum value
+ * - step: Step increment
+ * - value: Current value
+ * - name: Input name
+ * - disabled: Whether slider is disabled
+ * - outputFormat: Format string for output (use {value} for value, {percent} for percentage)
+ *
+ * Data attributes for native <input type="range">:
+ * - data-output-target: ID of element to display value (one-way: slider → output)
+ * - data-output-format: Format string with {value} and {percent} placeholders
+ * - data-input-target: ID of input element for two-way binding (slider ↔ input)
+ */
+export default class extends Controller {
+  static targets = ["track", "range", "thumb", "input", "output"]
+  static values = {
+    min: { type: Number, default: 0 },
+    max: { type: Number, default: 100 },
+    step: { type: Number, default: 1 },
+    value: { type: Number, default: 0 },
+    name: String,
+    disabled: { type: Boolean, default: false },
+    outputFormat: { type: String, default: "{value}" }
+  }
+
+  connect() {
+    this.isDragging = false
+    this.updateVisuals()
+    this.setupTwoWayBindings()
+  }
+
+  disconnect() {
+    this.teardownTwoWayBindings()
+  }
+
+  /**
+   * Set up two-way bindings for native range inputs with data-input-target
+   */
+  setupTwoWayBindings() {
+    this.inputBindings = []
+
+    // Check if the controller element itself is a range input with data-input-target
+    // (This is the case when data-controller is on the input element directly)
+    if (this.element.matches &&
+        this.element.matches('input[type="range"][data-input-target]')) {
+      this.setupBindingForInput(this.element)
+      return
+    }
+
+    // Otherwise, find all native range inputs with data-input-target attribute within the element
+    const rangeInputs = this.element.querySelectorAll('input[type="range"][data-input-target]')
+    rangeInputs.forEach(rangeInput => {
+      this.setupBindingForInput(rangeInput)
+    })
+  }
+
+  /**
+   * Set up two-way binding for a single range input
+   * @param {HTMLInputElement} rangeInput - The range input element
+   */
+  setupBindingForInput(rangeInput) {
+    const inputTargetId = rangeInput.dataset.inputTarget
+    const linkedInput = document.getElementById(inputTargetId)
+
+    if (linkedInput) {
+      // Create bound handler for this specific pair
+      const handler = this.handleLinkedInputChange.bind(this, rangeInput)
+
+      // Store binding info for cleanup
+      this.inputBindings.push({
+        rangeInput,
+        linkedInput,
+        handler
+      })
+
+      // Listen for changes on the linked input
+      linkedInput.addEventListener('input', handler)
+      linkedInput.addEventListener('change', handler)
+    }
+  }
+
+  /**
+   * Clean up event listeners when disconnecting
+   */
+  teardownTwoWayBindings() {
+    if (this.inputBindings) {
+      this.inputBindings.forEach(({ linkedInput, handler }) => {
+        linkedInput.removeEventListener('input', handler)
+        linkedInput.removeEventListener('change', handler)
+      })
+      this.inputBindings = []
+    }
+  }
+
+  /**
+   * Handle changes from a linked input element (input → slider sync)
+   * @param {HTMLInputElement} rangeInput - The range input to update
+   * @param {Event} event - The input/change event from the linked input
+   */
+  handleLinkedInputChange(rangeInput, event) {
+    const linkedInput = event.target
+    let value = parseFloat(linkedInput.value)
+
+    // Validate and clamp the value
+    const min = parseFloat(rangeInput.min) || 0
+    const max = parseFloat(rangeInput.max) || 100
+    const step = parseFloat(rangeInput.step) || 1
+
+    // Handle invalid input
+    if (isNaN(value)) {
+      value = min
+    }
+
+    // Clamp to min/max
+    value = Math.max(min, Math.min(max, value))
+
+    // Snap to step
+    const steps = Math.round((value - min) / step)
+    value = min + steps * step
+
+    // Update range input
+    rangeInput.value = value
+
+    // Update CSS custom property for fill
+    const percentage = ((value - min) / (max - min)) * 100
+    rangeInput.style.setProperty("--slider-fill", `${percentage}%`)
+
+    // Update the linked input if value was clamped/snapped
+    if (parseFloat(linkedInput.value) !== value) {
+      linkedInput.value = value
+    }
+
+    // Also update output if present
+    const outputTargetId = rangeInput.dataset.outputTarget
+    if (outputTargetId) {
+      const outputElement = document.getElementById(outputTargetId)
+      if (outputElement) {
+        const format = rangeInput.dataset.outputFormat || "{value}"
+        const formattedValue = format
+          .replace("{value}", value)
+          .replace("{percent}", Math.round(percentage))
+        outputElement.textContent = formattedValue
+      }
+    }
+
+    // Dispatch change event
+    this.dispatch("change", {
+      detail: { value: value, percentage: percentage }
+    })
+  }
+
+  startDrag(event) {
+    if (this.disabledValue) return
+
+    event.preventDefault()
+    this.isDragging = true
+
+    // Handle both mouse and touch events
+    const moveEvent = event.type === "touchstart" ? "touchmove" : "mousemove"
+    const endEvent = event.type === "touchstart" ? "touchend" : "mouseup"
+
+    this.handleDrag(event)
+
+    this.boundHandleDrag = this.handleDrag.bind(this)
+    this.boundStopDrag = this.stopDrag.bind(this)
+
+    document.addEventListener(moveEvent, this.boundHandleDrag)
+    document.addEventListener(endEvent, this.boundStopDrag)
+  }
+
+  handleDrag(event) {
+    if (!this.isDragging && event.type !== "mousedown" && event.type !== "touchstart") return
+
+    const track = this.trackTarget
+    const rect = track.getBoundingClientRect()
+
+    // Get clientX from either mouse or touch event
+    const clientX = event.type.includes("touch")
+      ? event.touches[0].clientX
+      : event.clientX
+
+    const percentage = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width))
+    const rawValue = this.minValue + percentage * (this.maxValue - this.minValue)
+    const steppedValue = this.snapToStep(rawValue)
+
+    this.valueValue = steppedValue
+    this.updateVisuals()
+    this.dispatchChange()
+  }
+
+  stopDrag() {
+    this.isDragging = false
+    document.removeEventListener("mousemove", this.boundHandleDrag)
+    document.removeEventListener("mouseup", this.boundStopDrag)
+    document.removeEventListener("touchmove", this.boundHandleDrag)
+    document.removeEventListener("touchend", this.boundStopDrag)
+  }
+
+  handleKeydown(event) {
+    if (this.disabledValue) return
+
+    let newValue = this.valueValue
+    const bigStep = (this.maxValue - this.minValue) / 10
+
+    switch (event.key) {
+      case "ArrowRight":
+      case "ArrowUp":
+        event.preventDefault()
+        newValue = Math.min(this.maxValue, this.valueValue + this.stepValue)
+        break
+      case "ArrowLeft":
+      case "ArrowDown":
+        event.preventDefault()
+        newValue = Math.max(this.minValue, this.valueValue - this.stepValue)
+        break
+      case "PageUp":
+        event.preventDefault()
+        newValue = Math.min(this.maxValue, this.valueValue + bigStep)
+        break
+      case "PageDown":
+        event.preventDefault()
+        newValue = Math.max(this.minValue, this.valueValue - bigStep)
+        break
+      case "Home":
+        event.preventDefault()
+        newValue = this.minValue
+        break
+      case "End":
+        event.preventDefault()
+        newValue = this.maxValue
+        break
+      default:
+        return
+    }
+
+    this.valueValue = this.snapToStep(newValue)
+    this.updateVisuals()
+    this.dispatchChange()
+  }
+
+  snapToStep(value) {
+    const steps = Math.round((value - this.minValue) / this.stepValue)
+    return Math.max(this.minValue, Math.min(this.maxValue, this.minValue + steps * this.stepValue))
+  }
+
+  updateVisuals() {
+    const percentage = this.percentage
+
+    if (this.hasRangeTarget) {
+      this.rangeTarget.style.width = `${percentage}%`
+    }
+
+    if (this.hasThumbTarget) {
+      this.thumbTarget.style.left = `calc(${percentage}% - 8px)`
+    }
+
+    // Update ARIA attributes
+    this.element.setAttribute("aria-valuenow", this.valueValue)
+
+    // Update hidden input
+    if (this.hasInputTarget) {
+      this.inputTarget.value = this.valueValue
+    }
+
+    // Update output element if present (for syncing value labels)
+    if (this.hasOutputTarget) {
+      this.updateOutput()
+    }
+  }
+
+  updateOutput() {
+    const formattedValue = this.outputFormatValue
+      .replace("{value}", this.valueValue)
+      .replace("{percent}", Math.round(this.percentage))
+
+    this.outputTarget.textContent = formattedValue
+  }
+
+  dispatchChange() {
+    this.dispatch("change", {
+      detail: { value: this.valueValue, name: this.nameValue }
+    })
+
+    // Dispatch native input event for form compatibility
+    if (this.hasInputTarget) {
+      this.inputTarget.dispatchEvent(new Event("input", { bubbles: true }))
+    }
+  }
+
+  get percentage() {
+    if (this.maxValue === this.minValue) return 0
+    return ((this.valueValue - this.minValue) / (this.maxValue - this.minValue)) * 100
+  }
+
+  valueValueChanged() {
+    this.updateVisuals()
+  }
+
+  /**
+   * Update style for native input range element
+   * Called on input event from native <input type="range">
+   * Updates CSS custom property for fill and syncs output element
+   */
+  updateStyle(event) {
+    const input = event.target
+    const value = parseFloat(input.value)
+    const min = parseFloat(input.min) || 0
+    const max = parseFloat(input.max) || 100
+
+    // Calculate percentage and update CSS custom property
+    const percentage = ((value - min) / (max - min)) * 100
+    input.style.setProperty("--slider-fill", `${percentage}%`)
+
+    // Update value for output sync
+    this.valueValue = value
+
+    // Update output if present (Stimulus target)
+    if (this.hasOutputTarget) {
+      this.updateOutput()
+    }
+
+    // Also check for data-output-target attribute (ID-based targeting)
+    const outputTargetId = input.dataset.outputTarget
+    if (outputTargetId) {
+      const outputElement = document.getElementById(outputTargetId)
+      if (outputElement) {
+        const format = input.dataset.outputFormat || "{value}"
+        const formattedValue = format
+          .replace("{value}", value)
+          .replace("{percent}", Math.round(percentage))
+        outputElement.textContent = formattedValue
+      }
+    }
+
+    // Sync to linked input element for two-way binding (slider → input)
+    const inputTargetId = input.dataset.inputTarget
+    if (inputTargetId) {
+      const linkedInput = document.getElementById(inputTargetId)
+      if (linkedInput) {
+        linkedInput.value = value
+      }
+    }
+
+    // Dispatch change event
+    this.dispatch("change", {
+      detail: { value: value, percentage: percentage }
+    })
+  }
+}

data/app/assets/javascripts/shadcn/controllers/switch_controller.d.ts

@@ -0,0 +1,46 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Switch Controller
+ * Handles toggle switch with hidden input sync for form submission
+ */
+export default class SwitchController extends Controller {
+  static targets: ["button", "thumb", "input"];
+  static values: {
+    checked: { type: "Boolean"; default: false };
+  };
+
+  /** Switch button target */
+  readonly buttonTarget: HTMLButtonElement;
+  readonly hasButtonTarget: boolean;
+
+  /** Switch thumb target */
+  readonly thumbTarget: HTMLElement;
+  readonly hasThumbTarget: boolean;
+
+  /** Hidden input target */
+  readonly inputTarget: HTMLInputElement;
+  readonly hasInputTarget: boolean;
+
+  /** Whether the switch is checked */
+  checkedValue: boolean;
+  readonly hasCheckedValue: boolean;
+
+  /** Toggle the switch */
+  toggle(): void;
+
+  /** Handle keyboard events (Space, Enter) */
+  handleKeydown(event: KeyboardEvent): void;
+
+  /** Update visual state */
+  updateVisuals(): void;
+
+  /** Sync hidden input value */
+  syncInput(): void;
+
+  /** Dispatch change event */
+  dispatchChange(): void;
+
+  /** Called when checkedValue changes */
+  checkedValueChanged(): void;
+}

data/app/assets/javascripts/shadcn/controllers/switch_controller.js

@@ -0,0 +1,78 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Switch Controller
+ *
+ * Handles toggle switch with hidden input sync for form submission
+ *
+ * Targets:
+ * - button: The visual switch button element
+ * - thumb: The sliding thumb element
+ * - input: Hidden checkbox input for form submission
+ *
+ * Values:
+ * - checked: Boolean indicating current state
+ */
+export default class extends Controller {
+  static targets = ["button", "thumb", "input"]
+  static values = {
+    checked: { type: Boolean, default: false }
+  }
+
+  connect() {
+    this.updateVisuals()
+  }
+
+  toggle() {
+    if (this.hasButtonTarget && this.buttonTarget.disabled) return
+
+    this.checkedValue = !this.checkedValue
+    this.updateVisuals()
+    this.syncInput()
+    this.dispatchChange()
+  }
+
+  handleKeydown(event) {
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault()
+      this.toggle()
+    }
+  }
+
+  updateVisuals() {
+    const state = this.checkedValue ? "checked" : "unchecked"
+
+    // Update button state
+    if (this.hasButtonTarget) {
+      this.buttonTarget.dataset.state = state
+      this.buttonTarget.setAttribute("aria-checked", this.checkedValue.toString())
+    }
+
+    // Update thumb position
+    if (this.hasThumbTarget) {
+      this.thumbTarget.dataset.state = state
+    }
+
+    // Update wrapper element state
+    this.element.dataset.state = state
+  }
+
+  syncInput() {
+    if (this.hasInputTarget) {
+      this.inputTarget.checked = this.checkedValue
+      // Dispatch native change event for form compatibility
+      this.inputTarget.dispatchEvent(new Event("change", { bubbles: true }))
+    }
+  }
+
+  dispatchChange() {
+    this.dispatch("change", {
+      detail: { checked: this.checkedValue }
+    })
+  }
+
+  checkedValueChanged() {
+    this.updateVisuals()
+    this.syncInput()
+  }
+}

data/app/assets/javascripts/shadcn/controllers/tabs_controller.d.ts

@@ -0,0 +1,51 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Tabs controller for tabbed interfaces
+ * Handles tab selection, keyboard navigation, content switching, and URL sync
+ */
+export default class TabsController extends Controller {
+  static targets: ["list", "trigger", "content"];
+  static values: {
+    defaultValue: "String";
+    urlParam: "String";
+  };
+
+  /** Tab list container target */
+  readonly listTarget: HTMLElement;
+  readonly hasListTarget: boolean;
+
+  /** Tab trigger targets */
+  readonly triggerTargets: HTMLElement[];
+  readonly hasTriggerTarget: boolean;
+
+  /** Tab content panel targets */
+  readonly contentTargets: HTMLElement[];
+  readonly hasContentTarget: boolean;
+
+  /** Default tab value to select */
+  defaultValueValue: string;
+  readonly hasDefaultValueValue: boolean;
+
+  /** URL parameter name for syncing tab state */
+  urlParamValue: string;
+  readonly hasUrlParamValue: boolean;
+
+  /** Handle browser back/forward navigation */
+  handlePopState(): void;
+
+  /** Get current value from URL */
+  getValueFromUrl(): string | null;
+
+  /** Update URL with current tab value */
+  updateUrl(value: string): void;
+
+  /** Select a tab via click event */
+  selectTab(event: Event): void;
+
+  /** Select a tab by its value */
+  selectTabByValue(value: string, updateUrl?: boolean): void;
+
+  /** Handle keyboard navigation (Arrow keys, Home, End) */
+  handleKeydown(event: KeyboardEvent): void;
+}

data/app/assets/javascripts/shadcn/controllers/tabs_controller.js

@@ -0,0 +1,126 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Tabs controller for tabbed interfaces
+ * Handles tab selection, keyboard navigation, content switching, and URL sync
+ */
+export default class extends Controller {
+  static targets = ["list", "trigger", "content"]
+  static values = {
+    defaultValue: String,
+    urlParam: String // Query parameter name for URL sync (e.g., "tab")
+  }
+
+  connect() {
+    // Determine initial tab value
+    let initialValue = this.getValueFromUrl() || this.defaultValueValue || this.triggerTargets[0]?.dataset.value
+
+    if (initialValue) {
+      // Validate that the value exists in our triggers
+      const validValues = this.triggerTargets.map(t => t.dataset.value)
+      if (!validValues.includes(initialValue)) {
+        initialValue = this.defaultValueValue || this.triggerTargets[0]?.dataset.value
+      }
+      this.selectTabByValue(initialValue, false) // Don't update URL on initial load
+    }
+
+    // Listen for browser back/forward navigation
+    if (this.hasUrlParamValue) {
+      window.addEventListener("popstate", this.handlePopState.bind(this))
+    }
+  }
+
+  disconnect() {
+    if (this.hasUrlParamValue) {
+      window.removeEventListener("popstate", this.handlePopState.bind(this))
+    }
+  }
+
+  handlePopState() {
+    const value = this.getValueFromUrl()
+    if (value) {
+      this.selectTabByValue(value, false)
+    }
+  }
+
+  getValueFromUrl() {
+    if (!this.hasUrlParamValue) return null
+
+    const url = new URL(window.location.href)
+    return url.searchParams.get(this.urlParamValue)
+  }
+
+  updateUrl(value) {
+    if (!this.hasUrlParamValue) return
+
+    const url = new URL(window.location.href)
+    url.searchParams.set(this.urlParamValue, value)
+    window.history.replaceState({}, "", url.toString())
+  }
+
+  selectTab(event) {
+    const trigger = event.currentTarget
+    const value = trigger.dataset.value
+    this.selectTabByValue(value, true)
+  }
+
+  selectTabByValue(value, updateUrl = true) {
+    // Update triggers
+    this.triggerTargets.forEach(trigger => {
+      const isSelected = trigger.dataset.value === value
+      trigger.dataset.state = isSelected ? "active" : "inactive"
+      trigger.setAttribute("aria-selected", isSelected.toString())
+      trigger.tabIndex = isSelected ? 0 : -1
+    })
+
+    // Update content panels
+    this.contentTargets.forEach(content => {
+      const isSelected = content.dataset.value === value
+      content.dataset.state = isSelected ? "active" : "inactive"
+      content.hidden = !isSelected
+    })
+
+    // Update URL if enabled
+    if (updateUrl) {
+      this.updateUrl(value)
+    }
+
+    this.dispatch("change", { detail: { value } })
+  }
+
+  // Keyboard navigation
+  handleKeydown(event) {
+    const triggers = this.triggerTargets.filter(t => !t.disabled)
+    const currentIndex = triggers.findIndex(t => t === document.activeElement)
+
+    if (currentIndex === -1) return
+
+    let newIndex = currentIndex
+
+    switch (event.key) {
+      case "ArrowLeft":
+      case "ArrowUp":
+        event.preventDefault()
+        newIndex = currentIndex === 0 ? triggers.length - 1 : currentIndex - 1
+        break
+      case "ArrowRight":
+      case "ArrowDown":
+        event.preventDefault()
+        newIndex = currentIndex === triggers.length - 1 ? 0 : currentIndex + 1
+        break
+      case "Home":
+        event.preventDefault()
+        newIndex = 0
+        break
+      case "End":
+        event.preventDefault()
+        newIndex = triggers.length - 1
+        break
+      default:
+        return
+    }
+
+    triggers[newIndex].focus()
+    triggers[newIndex].click()
+  }
+}

data/app/assets/javascripts/shadcn/controllers/toast_controller.d.ts

@@ -0,0 +1,37 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Toast controller for notification toasts
+ */
+export default class ToastController extends Controller {
+  static values: {
+    duration: { type: "Number"; default: 5000 };
+    open: { type: "Boolean"; default: true };
+  };
+
+  /** Auto-dismiss duration in milliseconds (0 to disable) */
+  durationValue: number;
+  readonly hasDurationValue: boolean;
+
+  /** Whether the toast is currently visible */
+  openValue: boolean;
+  readonly hasOpenValue: boolean;
+
+  /** Dismiss timeout handle */
+  dismissTimeout: ReturnType<typeof setTimeout> | null;
+
+  /** Close the toast */
+  close(): void;
+
+  /** Start the auto-dismiss timer */
+  startDismissTimer(): void;
+
+  /** Clear the dismiss timer */
+  clearDismissTimer(): void;
+
+  /** Pause the dismiss timer (on hover) */
+  pause(): void;
+
+  /** Resume the dismiss timer (on hover end) */
+  resume(): void;
+}