shadcn-rails 0.1.0

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

@@ -0,0 +1,83 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Dropdown controller for dropdown menus
+ * Handles opening, closing, keyboard navigation, and item selection
+ */
+export default class DropdownController extends Controller {
+  static targets: ["trigger", "content", "item"];
+  static values: {
+    open: { type: "Boolean"; default: false };
+    align: { type: "String"; default: "end" };
+    side: { type: "String"; default: "bottom" };
+  };
+
+  /** Dropdown trigger target */
+  readonly triggerTarget: HTMLElement;
+  readonly hasTriggerTarget: boolean;
+
+  /** Dropdown content target */
+  readonly contentTarget: HTMLElement;
+  readonly hasContentTarget: boolean;
+
+  /** Dropdown item targets */
+  readonly itemTargets: HTMLElement[];
+  readonly hasItemTarget: boolean;
+
+  /** Whether the dropdown is open */
+  openValue: boolean;
+  readonly hasOpenValue: boolean;
+
+  /** Horizontal alignment: "start", "center", "end" */
+  alignValue: "start" | "center" | "end";
+  readonly hasAlignValue: boolean;
+
+  /** Side to display: "top", "bottom" */
+  sideValue: "top" | "bottom";
+  readonly hasSideValue: boolean;
+
+  /** Currently focused item index */
+  focusedIndex: number;
+
+  /** Toggle dropdown open/closed */
+  toggle(event?: Event): void;
+
+  /** Show the dropdown */
+  show(): void;
+
+  /** Hide the dropdown */
+  hide(): void;
+
+  /** Close the dropdown (alias for hide) */
+  close(): void;
+
+  /** Select a menu item */
+  selectItem(event: Event): void;
+
+  /** Handle clicks outside the dropdown */
+  handleClickOutside(event: MouseEvent): void;
+
+  /** Handle keyboard navigation */
+  handleKeydown(event: KeyboardEvent): void;
+
+  /** Focus next menu item */
+  focusNextItem(): void;
+
+  /** Focus previous menu item */
+  focusPreviousItem(): void;
+
+  /** Focus first menu item */
+  focusFirstItem(): void;
+
+  /** Focus last menu item */
+  focusLastItem(): void;
+
+  /** Select the currently focused item */
+  selectFocusedItem(): void;
+
+  /** Get enabled (non-disabled) items */
+  readonly enabledItems: HTMLElement[];
+
+  /** Position the dropdown content */
+  positionContent(): void;
+}

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

@@ -0,0 +1,225 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Dropdown controller for dropdown menus
+ * Handles opening, closing, keyboard navigation, and item selection
+ */
+export default class extends Controller {
+  static targets = ["trigger", "content", "item"]
+  static values = {
+    open: { type: Boolean, default: false },
+    align: { type: String, default: "end" },
+    side: { type: String, default: "bottom" }
+  }
+
+  connect() {
+    this.focusedIndex = -1
+    this.boundHandleClickOutside = this.handleClickOutside.bind(this)
+    this.boundHandleKeydown = this.handleKeydown.bind(this)
+
+    if (this.openValue) {
+      this.show()
+    }
+  }
+
+  disconnect() {
+    this.hide()
+  }
+
+  toggle(event) {
+    event?.preventDefault()
+    if (this.openValue) {
+      this.hide()
+    } else {
+      this.show()
+    }
+  }
+
+  show() {
+    if (this.openValue) return
+
+    this.openValue = true
+
+    if (this.hasContentTarget) {
+      this.contentTarget.hidden = false
+      this.contentTarget.dataset.state = "open"
+      this.contentTarget.dataset.side = this.sideValue
+      this.positionContent()
+    }
+
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.setAttribute("aria-expanded", "true")
+    }
+
+    // Add event listeners
+    document.addEventListener("click", this.boundHandleClickOutside)
+    document.addEventListener("keydown", this.boundHandleKeydown)
+
+    // Focus first item
+    this.focusedIndex = -1
+    this.focusNextItem()
+
+    this.dispatch("opened")
+  }
+
+  hide() {
+    if (!this.openValue) return
+
+    this.openValue = false
+
+    if (this.hasContentTarget) {
+      this.contentTarget.dataset.state = "closed"
+      // Hide after animation
+      setTimeout(() => {
+        if (!this.openValue) {
+          this.contentTarget.hidden = true
+        }
+      }, 150)
+    }
+
+    if (this.hasTriggerTarget) {
+      this.triggerTarget.setAttribute("aria-expanded", "false")
+    }
+
+    // Remove event listeners
+    document.removeEventListener("click", this.boundHandleClickOutside)
+    document.removeEventListener("keydown", this.boundHandleKeydown)
+
+    // Reset focus index
+    this.focusedIndex = -1
+
+    this.dispatch("closed")
+  }
+
+  close() {
+    this.hide()
+  }
+
+  selectItem(event) {
+    const item = event.currentTarget
+    if (item.dataset.disabled !== undefined) return
+
+    this.dispatch("select", { detail: { item } })
+    this.hide()
+  }
+
+  handleClickOutside(event) {
+    if (!this.element.contains(event.target)) {
+      this.hide()
+    }
+  }
+
+  handleKeydown(event) {
+    switch (event.key) {
+      case "Escape":
+        this.hide()
+        this.triggerTarget?.focus()
+        break
+      case "ArrowDown":
+        event.preventDefault()
+        this.focusNextItem()
+        break
+      case "ArrowUp":
+        event.preventDefault()
+        this.focusPreviousItem()
+        break
+      case "Home":
+        event.preventDefault()
+        this.focusFirstItem()
+        break
+      case "End":
+        event.preventDefault()
+        this.focusLastItem()
+        break
+      case "Enter":
+      case " ":
+        event.preventDefault()
+        this.selectFocusedItem()
+        break
+    }
+  }
+
+  focusNextItem() {
+    const items = this.enabledItems
+    if (items.length === 0) return
+
+    this.focusedIndex = (this.focusedIndex + 1) % items.length
+    items[this.focusedIndex].focus()
+  }
+
+  focusPreviousItem() {
+    const items = this.enabledItems
+    if (items.length === 0) return
+
+    this.focusedIndex = this.focusedIndex <= 0 ? items.length - 1 : this.focusedIndex - 1
+    items[this.focusedIndex].focus()
+  }
+
+  focusFirstItem() {
+    const items = this.enabledItems
+    if (items.length === 0) return
+
+    this.focusedIndex = 0
+    items[0].focus()
+  }
+
+  focusLastItem() {
+    const items = this.enabledItems
+    if (items.length === 0) return
+
+    this.focusedIndex = items.length - 1
+    items[this.focusedIndex].focus()
+  }
+
+  selectFocusedItem() {
+    const items = this.enabledItems
+    if (this.focusedIndex >= 0 && this.focusedIndex < items.length) {
+      items[this.focusedIndex].click()
+    }
+  }
+
+  get enabledItems() {
+    return this.itemTargets.filter(item => item.dataset.disabled === undefined)
+  }
+
+  positionContent() {
+    if (!this.hasContentTarget || !this.hasTriggerTarget) return
+
+    const trigger = this.triggerTarget.getBoundingClientRect()
+    const content = this.contentTarget
+
+    // Position based on side and align
+    content.style.position = "absolute"
+    content.style.minWidth = `${trigger.width}px`
+
+    switch (this.sideValue) {
+      case "top":
+        content.style.bottom = "100%"
+        content.style.top = "auto"
+        content.style.marginBottom = "4px"
+        break
+      case "bottom":
+      default:
+        content.style.top = "100%"
+        content.style.bottom = "auto"
+        content.style.marginTop = "4px"
+        break
+    }
+
+    switch (this.alignValue) {
+      case "start":
+        content.style.left = "0"
+        content.style.right = "auto"
+        break
+      case "center":
+        content.style.left = "50%"
+        content.style.transform = "translateX(-50%)"
+        break
+      case "end":
+      default:
+        content.style.right = "0"
+        content.style.left = "auto"
+        break
+    }
+  }
+}

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

@@ -0,0 +1,59 @@
+import { Controller } from "@hotwired/stimulus";
+
+/**
+ * Hover Card Controller
+ * Handles showing/hiding content on hover with delays
+ */
+export default class HoverCardController extends Controller {
+  static targets: ["trigger", "content"];
+  static values: {
+    openDelay: { type: "Number"; default: 700 };
+    closeDelay: { type: "Number"; default: 300 };
+  };
+
+  /** Hover card trigger target */
+  readonly triggerTarget: HTMLElement;
+  readonly hasTriggerTarget: boolean;
+
+  /** Hover card content target */
+  readonly contentTarget: HTMLElement;
+  readonly hasContentTarget: boolean;
+
+  /** Delay before opening (ms) */
+  openDelayValue: number;
+  readonly hasOpenDelayValue: boolean;
+
+  /** Delay before closing (ms) */
+  closeDelayValue: number;
+  readonly hasCloseDelayValue: boolean;
+
+  /** Open timeout handle */
+  openTimeout: ReturnType<typeof setTimeout> | null;
+
+  /** Close timeout handle */
+  closeTimeout: ReturnType<typeof setTimeout> | null;
+
+  /** Whether the card is currently open */
+  isOpen: boolean;
+
+  /** Schedule opening the card */
+  scheduleOpen(): void;
+
+  /** Schedule closing the card */
+  scheduleClose(): void;
+
+  /** Cancel a pending close */
+  cancelClose(): void;
+
+  /** Clear all timeouts */
+  clearTimeouts(): void;
+
+  /** Open the hover card */
+  open(): void;
+
+  /** Close the hover card */
+  close(): void;
+
+  /** Position the card content */
+  positionContent(): void;
+}

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

@@ -0,0 +1,143 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Hover Card Controller
+ * Handles showing/hiding content on hover with delays
+ */
+export default class extends Controller {
+  static targets = ["trigger", "content"]
+  static values = {
+    openDelay: { type: Number, default: 700 },
+    closeDelay: { type: Number, default: 300 }
+  }
+
+  connect() {
+    this.openTimeout = null
+    this.closeTimeout = null
+    this.isOpen = false
+
+    this.triggerTarget.addEventListener("mouseenter", this.scheduleOpen.bind(this))
+    this.triggerTarget.addEventListener("mouseleave", this.scheduleClose.bind(this))
+    this.triggerTarget.addEventListener("focus", this.scheduleOpen.bind(this))
+    this.triggerTarget.addEventListener("blur", this.scheduleClose.bind(this))
+
+    this.contentTarget.addEventListener("mouseenter", this.cancelClose.bind(this))
+    this.contentTarget.addEventListener("mouseleave", this.scheduleClose.bind(this))
+  }
+
+  disconnect() {
+    this.clearTimeouts()
+  }
+
+  scheduleOpen() {
+    this.clearTimeouts()
+    this.openTimeout = setTimeout(() => {
+      this.open()
+    }, this.openDelayValue)
+  }
+
+  scheduleClose() {
+    this.clearTimeouts()
+    this.closeTimeout = setTimeout(() => {
+      this.close()
+    }, this.closeDelayValue)
+  }
+
+  cancelClose() {
+    if (this.closeTimeout) {
+      clearTimeout(this.closeTimeout)
+      this.closeTimeout = null
+    }
+  }
+
+  clearTimeouts() {
+    if (this.openTimeout) {
+      clearTimeout(this.openTimeout)
+      this.openTimeout = null
+    }
+    if (this.closeTimeout) {
+      clearTimeout(this.closeTimeout)
+      this.closeTimeout = null
+    }
+  }
+
+  open() {
+    if (this.isOpen) return
+
+    this.isOpen = true
+    this.contentTarget.style.display = "block"
+    this.contentTarget.setAttribute("data-state", "open")
+    this.positionContent()
+
+    this.dispatch("open")
+  }
+
+  close() {
+    if (!this.isOpen) return
+
+    this.isOpen = false
+    this.contentTarget.setAttribute("data-state", "closed")
+
+    // Wait for animation to complete
+    setTimeout(() => {
+      if (!this.isOpen) {
+        this.contentTarget.style.display = "none"
+      }
+    }, 150)
+
+    this.dispatch("close")
+  }
+
+  positionContent() {
+    const trigger = this.triggerTarget.getBoundingClientRect()
+    const content = this.contentTarget
+    const side = content.dataset.side || "bottom"
+    const align = content.dataset.align || "center"
+
+    // Reset position
+    content.style.top = ""
+    content.style.left = ""
+    content.style.right = ""
+    content.style.bottom = ""
+
+    const gap = 8 // Gap between trigger and content
+
+    switch (side) {
+      case "top":
+        content.style.bottom = "100%"
+        content.style.marginBottom = `${gap}px`
+        break
+      case "bottom":
+        content.style.top = "100%"
+        content.style.marginTop = `${gap}px`
+        break
+      case "left":
+        content.style.right = "100%"
+        content.style.marginRight = `${gap}px`
+        content.style.top = "0"
+        break
+      case "right":
+        content.style.left = "100%"
+        content.style.marginLeft = `${gap}px`
+        content.style.top = "0"
+        break
+    }
+
+    // Handle alignment for top/bottom
+    if (side === "top" || side === "bottom") {
+      switch (align) {
+        case "start":
+          content.style.left = "0"
+          break
+        case "end":
+          content.style.right = "0"
+          break
+        case "center":
+        default:
+          content.style.left = "50%"
+          content.style.transform = "translateX(-50%)"
+          break
+      }
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class InputOtpController extends Controller {
+  static targets: ["slot", "input", "hiddenInput", "caret"];
+  static values: {
+    length: { type: "Number"; default: 6 };
+    pattern: { type: "String"; default: "" };
+    disabled: { type: "Boolean"; default: false };
+  };
+
+  // Targets
+  readonly slotTargets: HTMLElement[];
+  readonly inputTargets: HTMLInputElement[];
+  readonly hiddenInputTarget: HTMLInputElement;
+  readonly caretTargets: HTMLElement[];
+  readonly hasHiddenInputTarget: boolean;
+
+  // Values
+  lengthValue: number;
+  patternValue: string;
+  disabledValue: boolean;
+
+  // Lifecycle
+  connect(): void;
+
+  // Event handlers
+  handleInput(event: InputEvent): void;
+  handleKeydown(event: KeyboardEvent): void;
+  handleFocus(event: FocusEvent): void;
+  handleBlur(event: FocusEvent): void;
+  handlePaste(event: ClipboardEvent): void;
+  focusSlot(event: Event): void;
+
+  // Methods
+  focusInput(index: number): void;
+  findNextEmptySlot(startIndex: number): number;
+  updateHiddenInput(): void;
+  updateCarets(): void;
+  clear(): void;
+
+  // Getters
+  readonly value: string;
+  readonly isComplete: boolean;
+}