fernandes-ui 0.1.0

data/app/javascript/ui/controllers/toggle_group_controller.js

@@ -0,0 +1,155 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Toggle Group Controller
+ *
+ * Manages single or multiple selection state for a group of toggle buttons.
+ *
+ * Values:
+ *   - type: "single" | "multiple" - Selection mode
+ *   - value: Array of selected values (stored as JSON string)
+ *
+ * Targets:
+ *   - item: Individual toggle items
+ *
+ * Actions:
+ *   - toggle: Toggles an item's state
+ *
+ * Data Attributes:
+ *   - data-state: "on" when selected, "off" when not selected
+ *   - aria-pressed: "true" when selected (multiple mode)
+ *   - aria-checked: "true" when selected (single mode)
+ */
+export default class extends Controller {
+  static targets = ["item"]
+  static values = {
+    type: { type: String, default: "single" },
+    value: { type: String, default: "[]" }
+  }
+
+  connect() {
+    // Parse initial value
+    try {
+      this.selectedValues = JSON.parse(this.valueValue || "[]")
+      if (!Array.isArray(this.selectedValues)) {
+        this.selectedValues = this.selectedValues ? [this.selectedValues] : []
+      }
+    } catch {
+      this.selectedValues = []
+    }
+
+    // Update all items based on initial value
+    this.updateAllItems()
+  }
+
+  /**
+   * Toggle an item's state
+   * @param {Event} event - Click event from item
+   */
+  toggle(event) {
+    const item = event.currentTarget
+    const value = item.dataset.value
+
+    if (!value) return
+
+    if (this.typeValue === "single") {
+      this.toggleSingle(value, item)
+    } else {
+      this.toggleMultiple(value, item)
+    }
+
+    // Dispatch custom event for external listeners
+    this.dispatch("change", {
+      detail: {
+        value: this.typeValue === "single" ? this.selectedValues[0] || null : this.selectedValues,
+        type: this.typeValue
+      }
+    })
+  }
+
+  /**
+   * Toggle in single selection mode
+   * @param {string} value - Item value
+   * @param {HTMLElement} item - Item element
+   */
+  toggleSingle(value, item) {
+    const currentValue = this.selectedValues[0]
+
+    if (currentValue === value) {
+      // Deselect current item
+      this.selectedValues = []
+    } else {
+      // Select new item
+      this.selectedValues = [value]
+    }
+
+    this.updateAllItems()
+  }
+
+  /**
+   * Toggle in multiple selection mode
+   * @param {string} value - Item value
+   * @param {HTMLElement} item - Item element
+   */
+  toggleMultiple(value, item) {
+    const index = this.selectedValues.indexOf(value)
+
+    if (index > -1) {
+      // Remove from selection
+      this.selectedValues.splice(index, 1)
+    } else {
+      // Add to selection
+      this.selectedValues.push(value)
+    }
+
+    this.updateAllItems()
+  }
+
+  /**
+   * Update all items' states based on selectedValues
+   */
+  updateAllItems() {
+    this.itemTargets.forEach(item => {
+      const value = item.dataset.value
+      const isSelected = this.selectedValues.includes(value)
+
+      // Update data-state attribute
+      item.dataset.state = isSelected ? "on" : "off"
+      item.setAttribute("data-state", isSelected ? "on" : "off")
+
+      // Update ARIA attributes
+      if (this.typeValue === "single") {
+        item.setAttribute("aria-checked", isSelected ? "true" : "false")
+      } else {
+        item.setAttribute("aria-pressed", isSelected ? "true" : "false")
+      }
+    })
+
+    // Update controller value
+    this.valueValue = JSON.stringify(this.selectedValues)
+  }
+
+  /**
+   * Get current selection
+   * @returns {string|string[]|null} Current value(s)
+   */
+  getValue() {
+    if (this.typeValue === "single") {
+      return this.selectedValues[0] || null
+    }
+    return this.selectedValues
+  }
+
+  /**
+   * Set value programmatically
+   * @param {string|string[]} newValue - New value(s) to set
+   */
+  setValue(newValue) {
+    if (this.typeValue === "single") {
+      this.selectedValues = newValue ? [newValue] : []
+    } else {
+      this.selectedValues = Array.isArray(newValue) ? newValue : []
+    }
+    this.updateAllItems()
+  }
+}

data/app/javascript/ui/controllers/tooltip_controller.js

@@ -0,0 +1,122 @@
+import { Controller } from "@hotwired/stimulus"
+import { setState } from "../utils/state-manager.js"
+import { createPositioner, getPlacementFromAttributes } from "../utils/floating-ui-positioner.js"
+import { onEscapeKeyWhen } from "../utils/escape-key-manager.js"
+
+// Tooltip controller using Floating UI for positioning
+// Structure: Tooltip (root) > Trigger + Content
+// Note: Targets are optional because content is moved to document.body during connect()
+export default class extends Controller {
+  static targets = ["trigger", "content"]
+  static values = {
+    sideOffset: { type: Number, default: 4 },
+    hoverDelay: { type: Number, default: 0 }
+  }
+
+  connect() {
+    this.hoverTimeout = null
+    this.isOpen = false
+    this.positioner = null
+
+    // Close on Escape key (only when open)
+    this.cleanupEscape = onEscapeKeyWhen(() => this.hide(), () => this.isOpen)
+
+    // Store reference to content before moving it
+    // Once we move it to body, Stimulus loses the target reference
+    if (this.hasContentTarget) {
+      this.content = this.contentTarget
+      this.originalParent = this.content.parentNode
+
+      // Move content to body on next tick after Stimulus has finished connecting
+      requestAnimationFrame(() => {
+        if (this.content) {
+          document.body.appendChild(this.content)
+        }
+      })
+    }
+  }
+
+  disconnect() {
+    // Cleanup positioner
+    if (this.positioner) {
+      this.positioner.stop()
+      this.positioner = null
+    }
+
+    // Clear hover timeout
+    if (this.hoverTimeout) {
+      clearTimeout(this.hoverTimeout)
+      this.hoverTimeout = null
+    }
+
+    // Return content to original parent
+    if (this.content && this.content.parentNode === document.body) {
+      if (this.originalParent) {
+        this.originalParent.appendChild(this.content)
+      } else {
+        document.body.removeChild(this.content)
+      }
+    }
+
+    // Remove escape key listener
+    if (this.cleanupEscape) {
+      this.cleanupEscape()
+    }
+  }
+
+  show() {
+    // Clear any pending hide timeout
+    if (this.hoverTimeout) {
+      clearTimeout(this.hoverTimeout)
+      this.hoverTimeout = null
+    }
+
+    // Apply hover delay before showing
+    this.hoverTimeout = setTimeout(() => {
+      if (!this.content || !this.hasTriggerTarget) return
+
+      this.isOpen = true
+      setState(this.content, 'open')
+
+      // Update position with Floating UI
+      this.updatePosition()
+    }, this.hoverDelayValue)
+  }
+
+  hide() {
+    // Clear show timeout if still pending
+    if (this.hoverTimeout) {
+      clearTimeout(this.hoverTimeout)
+      this.hoverTimeout = null
+    }
+
+    if (!this.content) return
+
+    this.isOpen = false
+    setState(this.content, 'closed')
+
+    // Cleanup positioner when hiding
+    if (this.positioner) {
+      this.positioner.stop()
+    }
+  }
+
+  updatePosition() {
+    if (!this.content || !this.hasTriggerTarget) return
+
+    // Get placement from content data attributes
+    const placement = getPlacementFromAttributes(this.content)
+
+    // Create or update positioner
+    if (!this.positioner) {
+      this.positioner = createPositioner(this.triggerTarget, this.content, {
+        placement,
+        offsetValue: this.sideOffsetValue
+      })
+    } else {
+      this.positioner.setPlacement(placement)
+    }
+
+    this.positioner.start()
+  }
+}

data/app/javascript/ui/index.js

@@ -0,0 +1,94 @@
+/**
+ * UI Engine - Main Entry Point
+ *
+ * This file is the single source for both importmap and bundler usage.
+ * Rollup generates two outputs from this file:
+ * - UMD format (ui.js) for importmaps
+ * - ESM format (ui.esm.js) for npm packages/bundlers
+ */
+
+// Import controllers
+import HelloController from "./controllers/hello_controller.js";
+import DropdownController from "./controllers/dropdown_controller.js";
+import AccordionController from "./controllers/accordion_controller.js";
+import AlertDialogController from "./controllers/alert_dialog_controller.js";
+import AvatarController from "./controllers/avatar_controller.js";
+import DialogController from "./controllers/dialog_controller.js";
+import CheckboxController from "./controllers/checkbox_controller.js";
+import CollapsibleController from "./controllers/collapsible_controller.js";
+import ComboboxController from "./controllers/combobox_controller.js";
+import CommandController from "./controllers/command_controller.js";
+import ContextMenuController from "./controllers/context_menu_controller.js";
+import CommandDialogController from "./controllers/command_dialog_controller.js";
+import DrawerController from "./controllers/drawer_controller.js";
+import HoverCardController from "./controllers/hover_card_controller.js";
+import InputOtpController from "./controllers/input_otp_controller.js";
+import TooltipController from "./controllers/tooltip_controller.js";
+import PopoverController from "./controllers/popover_controller.js";
+import ResponsiveDialogController from "./controllers/responsive_dialog_controller.js";
+import ScrollAreaController from "./controllers/scroll_area_controller.js";
+import SelectController from "./controllers/select_controller.js";
+import SidebarController from "./controllers/sidebar_controller.js";
+import SonnerController from "./controllers/sonner_controller.js";
+import ToggleController from "./controllers/toggle_controller.js";
+import ToggleGroupController from "./controllers/toggle_group_controller.js";
+import TabsController from "./controllers/tabs_controller.js";
+import SliderController from "./controllers/slider_controller.js";
+import SwitchController from "./controllers/switch_controller.js";
+import CalendarController from "./controllers/calendar_controller.js";
+import CarouselController from "./controllers/carousel_controller.js";
+import DatepickerController from "./controllers/datepicker_controller.js";
+import MenubarController from "./controllers/menubar_controller.js";
+import NavigationMenuController from "./controllers/navigation_menu_controller.js";
+import ResizableController from "./controllers/resizable_controller.js";
+
+// Import registration function
+import { registerControllersInto } from "./common.js";
+
+// Version
+export const version = "0.1.0";
+
+// Register controllers into a provided Stimulus application
+export function registerControllers(application) {
+  return registerControllersInto(application, {
+    "ui--hello": HelloController,
+    "ui--dropdown": DropdownController,
+    "ui--accordion": AccordionController,
+    "ui--alert-dialog": AlertDialogController,
+    "ui--avatar": AvatarController,
+    "ui--dialog": DialogController,
+    "ui--drawer": DrawerController,
+    "ui--checkbox": CheckboxController,
+    "ui--collapsible": CollapsibleController,
+    "ui--combobox": ComboboxController,
+    "ui--command": CommandController,
+    "ui--command-dialog": CommandDialogController,
+    "ui--context-menu": ContextMenuController,
+    "ui--hover-card": HoverCardController,
+    "ui--input-otp": InputOtpController,
+    "ui--tooltip": TooltipController,
+    "ui--popover": PopoverController,
+    "ui--responsive-dialog": ResponsiveDialogController,
+    "ui--scroll-area": ScrollAreaController,
+    "ui--select": SelectController,
+    "ui--sidebar": SidebarController,
+    "ui--slider": SliderController,
+    "ui--sonner": SonnerController,
+    "ui--switch": SwitchController,
+    "ui--tabs": TabsController,
+    "ui--toggle": ToggleController,
+    "ui--toggle-group": ToggleGroupController,
+    "ui--calendar": CalendarController,
+    "ui--carousel": CarouselController,
+    "ui--datepicker": DatepickerController,
+    "ui--menubar": MenubarController,
+    "ui--navigation-menu": NavigationMenuController,
+    "ui--resizable": ResizableController
+  });
+}
+
+// Re-export helper
+export { registerControllersInto };
+
+// Export individual controllers for selective import
+export { HelloController, DropdownController, AccordionController, AlertDialogController, AvatarController, CalendarController, CarouselController, DatepickerController, DialogController, DrawerController, CheckboxController, CollapsibleController, ComboboxController, CommandController, CommandDialogController, ContextMenuController, HoverCardController, InputOtpController, MenubarController, NavigationMenuController, ResizableController, TooltipController, PopoverController, ResponsiveDialogController, ScrollAreaController, SelectController, SidebarController, SliderController, SonnerController, SwitchController, TabsController, ToggleController, ToggleGroupController };

data/app/javascript/ui/utils/click-outside-manager.js

@@ -0,0 +1,133 @@
+/**
+ * Click Outside Manager Utility
+ *
+ * Handles detection of clicks outside a specified element.
+ * Used by dropdown, select, popover, and other overlay components.
+ */
+
+/**
+ * Create a click-outside handler
+ * @param {HTMLElement|HTMLElement[]} elements - Element(s) to monitor (clicks inside these are ignored)
+ * @param {Function} onClickOutside - Callback when click occurs outside
+ * @param {Object} options - Configuration options
+ * @param {boolean} options.capture - Use capture phase (default: false)
+ * @param {string[]} options.ignoreSelectors - CSS selectors to ignore (e.g., '[data-ignore-click-outside]')
+ * @param {boolean} options.mousedown - Listen to mousedown instead of click (default: false)
+ * @returns {Object} Handler object with attach/detach methods
+ */
+export function createClickOutsideHandler(elements, onClickOutside, options = {}) {
+  const {
+    capture = false,
+    ignoreSelectors = [],
+    mousedown = false
+  } = options
+
+  const elementsArray = Array.isArray(elements) ? elements : [elements]
+  let handler = null
+  let isAttached = false
+
+  const eventType = mousedown ? 'mousedown' : 'click'
+
+  const clickHandler = (event) => {
+    const target = event.target
+
+    // Check if click is inside any of the monitored elements
+    const isInside = elementsArray.some(element => {
+      return element && element.contains(target)
+    })
+
+    if (isInside) return
+
+    // Check if click is on an ignored element
+    const isIgnored = ignoreSelectors.some(selector => {
+      return target.closest(selector) !== null
+    })
+
+    if (isIgnored) return
+
+    onClickOutside(event)
+  }
+
+  return {
+    /**
+     * Attach the click-outside listener
+     */
+    attach() {
+      if (isAttached) return
+
+      handler = clickHandler
+      document.addEventListener(eventType, handler, capture)
+      isAttached = true
+    },
+
+    /**
+     * Detach the click-outside listener
+     */
+    detach() {
+      if (!isAttached || !handler) return
+
+      document.removeEventListener(eventType, handler, capture)
+      handler = null
+      isAttached = false
+    },
+
+    /**
+     * Check if handler is currently attached
+     * @returns {boolean}
+     */
+    isAttached() {
+      return isAttached
+    },
+
+    /**
+     * Update the elements being monitored
+     * @param {HTMLElement|HTMLElement[]} newElements
+     */
+    updateElements(newElements) {
+      elementsArray.length = 0
+      const newArray = Array.isArray(newElements) ? newElements : [newElements]
+      elementsArray.push(...newArray)
+    }
+  }
+}
+
+/**
+ * Simple one-liner to setup click-outside handler
+ * Returns cleanup function
+ * @param {HTMLElement|HTMLElement[]} elements - Element(s) to monitor
+ * @param {Function} onClickOutside - Callback when click occurs outside
+ * @param {Object} options - Configuration options
+ * @returns {Function} Cleanup function to remove listener
+ */
+export function onClickOutside(elements, onClickOutside, options = {}) {
+  const handler = createClickOutsideHandler(elements, onClickOutside, options)
+  handler.attach()
+  return () => handler.detach()
+}
+
+/**
+ * Setup click-outside handler that only triggers when a condition is true
+ * @param {HTMLElement|HTMLElement[]} elements - Element(s) to monitor
+ * @param {Function} onClickOutside - Callback when click occurs outside
+ * @param {Function} condition - Function that returns whether handler should trigger
+ * @returns {Function} Cleanup function
+ */
+export function onClickOutsideWhen(elements, onClickOutside, condition) {
+  const elementsArray = Array.isArray(elements) ? elements : [elements]
+
+  const clickHandler = (event) => {
+    if (!condition()) return
+
+    const target = event.target
+    const isInside = elementsArray.some(element => {
+      return element && element.contains(target)
+    })
+
+    if (!isInside) {
+      onClickOutside(event)
+    }
+  }
+
+  document.addEventListener('click', clickHandler)
+  return () => document.removeEventListener('click', clickHandler)
+}

data/app/javascript/ui/utils/escape-key-manager.js

@@ -0,0 +1,118 @@
+/**
+ * Escape Key Manager Utility
+ *
+ * Handles escape key binding and cleanup for modal components.
+ * Used by dialog, alert_dialog, popover, tooltip, drawer, responsive_dialog, etc.
+ */
+
+/**
+ * Create an escape key handler
+ * @param {Function} onEscape - Callback to execute when escape is pressed
+ * @param {Object} options - Configuration options
+ * @param {boolean} options.enabled - Whether handler is enabled (default: true)
+ * @param {boolean} options.stopPropagation - Whether to stop event propagation (default: false)
+ * @param {boolean} options.preventDefault - Whether to prevent default behavior (default: false)
+ * @returns {Object} Handler object with attach/detach methods
+ */
+export function createEscapeKeyHandler(onEscape, options = {}) {
+  const {
+    enabled = true,
+    stopPropagation = false,
+    preventDefault = false
+  } = options
+
+  let handler = null
+  let isAttached = false
+
+  const keydownHandler = (event) => {
+    if (event.key === 'Escape') {
+      if (stopPropagation) {
+        event.stopPropagation()
+      }
+      if (preventDefault) {
+        event.preventDefault()
+      }
+      onEscape(event)
+    }
+  }
+
+  return {
+    /**
+     * Attach the escape key listener
+     */
+    attach() {
+      if (!enabled || isAttached) return
+
+      handler = keydownHandler
+      document.addEventListener('keydown', handler)
+      isAttached = true
+    },
+
+    /**
+     * Detach the escape key listener
+     */
+    detach() {
+      if (!isAttached || !handler) return
+
+      document.removeEventListener('keydown', handler)
+      handler = null
+      isAttached = false
+    },
+
+    /**
+     * Check if handler is currently attached
+     * @returns {boolean}
+     */
+    isAttached() {
+      return isAttached
+    },
+
+    /**
+     * Temporarily disable the handler without detaching
+     */
+    disable() {
+      if (handler) {
+        document.removeEventListener('keydown', handler)
+      }
+    },
+
+    /**
+     * Re-enable a disabled handler
+     */
+    enable() {
+      if (handler && isAttached) {
+        document.addEventListener('keydown', handler)
+      }
+    }
+  }
+}
+
+/**
+ * Simple one-liner to setup escape handler
+ * Returns cleanup function
+ * @param {Function} onEscape - Callback to execute
+ * @param {Object} options - Configuration options
+ * @returns {Function} Cleanup function to remove listener
+ */
+export function onEscapeKey(onEscape, options = {}) {
+  const handler = createEscapeKeyHandler(onEscape, options)
+  handler.attach()
+  return () => handler.detach()
+}
+
+/**
+ * Setup escape handler only when a condition is true
+ * @param {Function} onEscape - Callback to execute
+ * @param {Function} condition - Function that returns whether handler should be active
+ * @returns {Function} Cleanup function
+ */
+export function onEscapeKeyWhen(onEscape, condition) {
+  const keydownHandler = (event) => {
+    if (event.key === 'Escape' && condition()) {
+      onEscape(event)
+    }
+  }
+
+  document.addEventListener('keydown', keydownHandler)
+  return () => document.removeEventListener('keydown', keydownHandler)
+}