lightning_ui_kit 0.2.3 → 0.2.5

data/app/javascript/lightning_ui_kit/controllers/field_controller.js

@@ -0,0 +1,23 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["field"]
+
+  fieldTargetConnected(element) {
+    element.addEventListener("mouseenter", this.handleMouseEnter)
+    element.addEventListener("mouseleave", this.handleMouseLeave)
+  }
+
+  fieldTargetDisconnected(element) {
+    element.removeEventListener("mouseenter", this.handleMouseEnter)
+    element.removeEventListener("mouseleave", this.handleMouseLeave)
+  }
+
+  handleMouseEnter = (event) => {
+    event.target.dataset.hover = ""
+  }
+
+  handleMouseLeave = (event) => {
+    delete event.target.dataset.hover
+  }
+}

data/app/javascript/lightning_ui_kit/controllers/layout_controller.js

@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["overlay"]
+
+  openSidebar() {
+    this.overlayTarget.dataset.open = ""
+    document.body.style.overflow = "hidden"
+  }
+
+  closeSidebar() {
+    delete this.overlayTarget.dataset.open
+    document.body.style.overflow = ""
+  }
+
+  disconnect() {
+    document.body.style.overflow = ""
+  }
+}

data/app/javascript/lightning_ui_kit/controllers/modal_controller.js

@@ -1,7 +1,7 @@
 import { Controller } from "@hotwired/stimulus"
 
 export default class extends Controller {
-  static targets = ["dialog"]
+  static targets = ["dialog", "panel"]
   static values = {
     open: Boolean
   }
@@ -38,6 +38,12 @@ export default class extends Controller {
     }
   }
 
+  closeOnBackdrop(event) {
+    if (this.hasPanelTarget && !this.panelTarget.contains(event.target)) {
+      this.close()
+    }
+  }
+
   submitForm() {
     this.dialogTarget.querySelector("form").requestSubmit()
   }

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

@@ -0,0 +1,235 @@
+import { Controller } from "@hotwired/stimulus"
+import { computePosition, autoUpdate, offset, flip, shift, arrow, size } from "@floating-ui/dom"
+
+export default class extends Controller {
+  static targets = ["template"]
+  static values = {
+    active: Boolean,
+    position: String,
+    delay: { type: Number, default: 0 },
+    offset: { type: Number, default: 8 }
+  }
+
+  connect() {
+    this.showTimeout = null
+    this.hideTimeout = null
+    this.cleanup = null
+
+    // Handle ESC key to close tooltip
+    this.handleKeydown = this.handleKeydown.bind(this)
+
+    // Handle touch devices - click to toggle
+    if ('ontouchstart' in window) {
+      this.element.addEventListener('click', this.toggle.bind(this))
+    }
+  }
+
+  disconnect() {
+    this.hide()
+    this.clearTimeouts()
+
+    if ('ontouchstart' in window) {
+      this.element.removeEventListener('click', this.toggle.bind(this))
+    }
+  }
+
+  show(event) {
+    if (!this.activeValue) return
+
+    // Prevent multiple tooltips
+    this.hideOtherTooltips()
+
+    // Clear any pending hide
+    this.clearTimeouts()
+
+    if (this.delayValue > 0) {
+      this.showTimeout = setTimeout(() => this.createTooltip(event), this.delayValue)
+    } else {
+      this.createTooltip(event)
+    }
+  }
+
+  hide() {
+    this.clearTimeouts()
+
+    if (this.delayValue > 0) {
+      this.hideTimeout = setTimeout(() => this.destroyTooltip(), this.delayValue)
+    } else {
+      this.destroyTooltip()
+    }
+  }
+
+  toggle(event) {
+    if (this.tooltip) {
+      this.hide()
+    } else {
+      this.show(event)
+    }
+  }
+
+  createTooltip(event) {
+    if (this.tooltip) return
+
+    const triggerElement = event?.currentTarget || this.element
+
+    try {
+      // Create tooltip element
+      const tooltip = document.createElement("div")
+      tooltip.innerHTML = this.templateTarget.innerHTML
+      tooltip.style.position = "absolute"
+      tooltip.style.zIndex = "9999"
+      tooltip.setAttribute('role', 'tooltip')
+      tooltip.setAttribute('data-lui-tooltip-instance', 'true')
+      document.body.appendChild(tooltip)
+      this.tooltip = tooltip
+
+      // Find the actual tooltip content (first child)
+      const tooltipContent = tooltip.firstElementChild
+      const arrowElement = tooltipContent?.querySelector("[data-tooltip-arrow]")
+
+      if (tooltipContent) {
+        // Set up auto-updating position
+        this.cleanup = autoUpdate(
+          triggerElement,
+          tooltipContent,
+          () => this.updatePosition(triggerElement, tooltipContent, arrowElement)
+        )
+
+        // Trigger fade-in animation
+        requestAnimationFrame(() => {
+          tooltipContent.style.opacity = '1'
+        })
+
+        // Add keyboard listener
+        document.addEventListener('keydown', this.handleKeydown)
+      }
+    } catch (error) {
+      console.warn('Tooltip positioning failed:', error)
+      this.destroyTooltip()
+    }
+  }
+
+  destroyTooltip() {
+    if (this.cleanup) {
+      this.cleanup()
+      this.cleanup = null
+    }
+
+    if (this.tooltip) {
+      const tooltipContent = this.tooltip.firstElementChild
+      
+      if (tooltipContent) {
+        // Fade out animation
+        tooltipContent.style.opacity = '0'
+        
+        // Remove after transition completes
+        setTimeout(() => {
+          if (this.tooltip) {
+            this.tooltip.remove()
+            this.tooltip = null
+          }
+        }, 200) // Match the transition duration
+      } else {
+        this.tooltip.remove()
+        this.tooltip = null
+      }
+    }
+
+    document.removeEventListener('keydown', this.handleKeydown)
+  }
+
+  updatePosition(triggerElement, tooltipContent, arrowElement) {
+    if (!tooltipContent) return
+
+    computePosition(triggerElement, tooltipContent, {
+      placement: this.positionValue || "bottom",
+      middleware: [
+        offset(this.offsetValue),
+        size(),
+        flip(),
+        shift({ padding: 5 }),
+        ...(arrowElement ? [arrow({ element: arrowElement })] : [])
+      ],
+    }).then(({ x, y, placement, middlewareData }) => {
+      Object.assign(tooltipContent.style, {
+        left: `${x}px`,
+        top: `${y}px`,
+      })
+
+      if (arrowElement && middlewareData.arrow) {
+        this.positionArrow(arrowElement, placement, middlewareData.arrow)
+      }
+    }).catch(error => {
+      console.warn('Tooltip positioning update failed:', error)
+    })
+  }
+
+  positionArrow(arrowElement, placement, arrowData) {
+    const { x: arrowX, y: arrowY } = arrowData
+    const primaryPlacement = placement.split('-')[0]
+
+    // Reset arrow styles
+    Object.assign(arrowElement.style, {
+      left: '',
+      top: '',
+      right: '',
+      bottom: '',
+    })
+
+    const arrowOffset = '-4px'
+
+    switch (primaryPlacement) {
+      case 'top':
+        Object.assign(arrowElement.style, {
+          left: arrowX != null ? `${arrowX}px` : '',
+          bottom: arrowOffset,
+        })
+        break
+      case 'bottom':
+        Object.assign(arrowElement.style, {
+          left: arrowX != null ? `${arrowX}px` : '',
+          top: arrowOffset,
+        })
+        break
+      case 'left':
+        Object.assign(arrowElement.style, {
+          top: arrowY != null ? `${arrowY}px` : '',
+          right: arrowOffset,
+        })
+        break
+      case 'right':
+        Object.assign(arrowElement.style, {
+          top: arrowY != null ? `${arrowY}px` : '',
+          left: arrowOffset,
+        })
+        break
+    }
+  }
+
+  handleKeydown(event) {
+    if (event.key === 'Escape' && this.tooltip) {
+      this.hide()
+    }
+  }
+
+  hideOtherTooltips() {
+    // Hide any other active tooltips
+    document.querySelectorAll('[data-lui-tooltip-instance="true"]').forEach(tooltip => {
+      if (tooltip !== this.tooltip) {
+        tooltip.remove()
+      }
+    })
+  }
+
+  clearTimeouts() {
+    if (this.showTimeout) {
+      clearTimeout(this.showTimeout)
+      this.showTimeout = null
+    }
+
+    if (this.hideTimeout) {
+      clearTimeout(this.hideTimeout)
+      this.hideTimeout = null
+    }
+  }
+}

data/app/javascript/lightning_ui_kit/index.js

@@ -11,6 +11,7 @@ window.Stimulus = application
 import ClipboardController from './controllers/clipboard_controller'
 import CheckboxController from './controllers/checkbox_controller'
 import BannerController from './controllers/banner_controller'
+import LayoutController from './controllers/layout_controller'
 import MainController from './controllers/main_controller'
 import AccordionController from './controllers/accordion_controller'
 import ModalController from './controllers/modal_controller'
@@ -19,11 +20,15 @@ import SwitchController from './controllers/switch_controller'
 import DropdownController from './controllers/dropdown_controller'
 import DropzoneController from './controllers/dropzone_controller'
 import ToastController from './controllers/toast_controller'
+import TooltipController from './controllers/tooltip_controller'
+import ComboboxController from './controllers/combobox_controller'
+import FieldController from './controllers/field_controller'
 
 export function registerLuiControllers(application) {
   application.register(`${namespace}-clipboard`, ClipboardController)
   application.register(`${namespace}-checkbox`, CheckboxController)
   application.register(`${namespace}-banner`, BannerController)
+  application.register(`${namespace}-layout`, LayoutController)
   application.register(`${namespace}-main`, MainController)
   application.register(`${namespace}-accordion`, AccordionController)
   application.register(`${namespace}-modal`, ModalController)
@@ -32,6 +37,9 @@ export function registerLuiControllers(application) {
   application.register(`${namespace}-dropdown`, DropdownController)
   application.register(`${namespace}-dropzone`, DropzoneController)
   application.register(`${namespace}-toast`, ToastController)
+  application.register(`${namespace}-tooltip`, TooltipController)
+  application.register(`${namespace}-combobox`, ComboboxController)
+  application.register(`${namespace}-field`, FieldController)
 }
 registerLuiControllers(application)
 

data/config/deploy.yml

@@ -5,10 +5,7 @@ ssh:
   user: www
 
 registry:
-  server: ghcr.io
-  username: k0va1
-  password:
-    - KAMAL_REGISTRY_PASSWORD
+  server: "localhost:5555"
 
 builder:
   arch: amd64
@@ -37,8 +34,8 @@ env:
 
 proxy:
   ssl: false
+  host: ui.k0va1.dev
   app_port: 8000
-  host: ui.lightningrails.xyz
   forward_headers: true
   healthcheck:
     interval: 3

data/lib/lightning_ui_kit/engine.rb

@@ -4,12 +4,7 @@ module LightningUiKit
   class Engine < ::Rails::Engine
     isolate_namespace LightningUiKit
 
-    config.autoload_paths = %W[
-      #{root}/app/components
-      #{root}/app/helpers
-    ]
-
-    initializer "lightning_ui_kit.helpers" do
+    config.to_prepare do
       ActiveSupport.on_load(:action_controller_base) do
         helper LightningUiKit::ApplicationHelper
         helper LightningUiKit::HeroiconHelper

data/lib/lightning_ui_kit/version.rb

@@ -1,3 +1,3 @@
 module LightningUiKit
-  VERSION = "0.2.3"
+  VERSION = "0.2.5"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: lightning_ui_kit
 version: !ruby/object:Gem::Version
-  version: 0.2.3
+  version: 0.2.5
 platform: ruby
 authors:
 - Alex Koval
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-08-04 00:00:00.000000000 Z
+date: 2026-01-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -80,20 +80,6 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
-- !ruby/object:Gem::Dependency
-  name: rspec-rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
-  type: :development
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '0'
 description: Lightning UI is a collection of UI components for Rails applications
 email:
 - al3xander.koval@gmail.com
@@ -123,6 +109,8 @@ files:
 - app/components/lightning_ui_kit/button_component.rb
 - app/components/lightning_ui_kit/checkbox_component.html.erb
 - app/components/lightning_ui_kit/checkbox_component.rb
+- app/components/lightning_ui_kit/combobox_component.html.erb
+- app/components/lightning_ui_kit/combobox_component.rb
 - app/components/lightning_ui_kit/description_list/item_component.html.erb
 - app/components/lightning_ui_kit/description_list/item_component.rb
 - app/components/lightning_ui_kit/description_list_component.html.erb
@@ -137,6 +125,8 @@ files:
 - app/components/lightning_ui_kit/file_input_component.rb
 - app/components/lightning_ui_kit/input_component.html.erb
 - app/components/lightning_ui_kit/input_component.rb
+- app/components/lightning_ui_kit/layout_component.html.erb
+- app/components/lightning_ui_kit/layout_component.rb
 - app/components/lightning_ui_kit/link_component.html.erb
 - app/components/lightning_ui_kit/link_component.rb
 - app/components/lightning_ui_kit/modal_component.html.erb
@@ -147,6 +137,10 @@ files:
 - app/components/lightning_ui_kit/select_component.rb
 - app/components/lightning_ui_kit/sidebar_component.html.erb
 - app/components/lightning_ui_kit/sidebar_component.rb
+- app/components/lightning_ui_kit/sidebar_link_component.html.erb
+- app/components/lightning_ui_kit/sidebar_link_component.rb
+- app/components/lightning_ui_kit/sidebar_section_component.html.erb
+- app/components/lightning_ui_kit/sidebar_section_component.rb
 - app/components/lightning_ui_kit/skeleton_component.html.erb
 - app/components/lightning_ui_kit/skeleton_component.rb
 - app/components/lightning_ui_kit/spinner_component.html.erb
@@ -163,19 +157,25 @@ files:
 - app/components/lightning_ui_kit/textarea_component.rb
 - app/components/lightning_ui_kit/toast_component.html.erb
 - app/components/lightning_ui_kit/toast_component.rb
+- app/components/lightning_ui_kit/tooltip_component.html.erb
+- app/components/lightning_ui_kit/tooltip_component.rb
 - app/helpers/lightning_ui_kit/application_helper.rb
 - app/helpers/lightning_ui_kit/heroicon_helper.rb
 - app/javascript/lightning_ui_kit/controllers/accordion_controller.js
 - app/javascript/lightning_ui_kit/controllers/banner_controller.js
 - app/javascript/lightning_ui_kit/controllers/checkbox_controller.js
 - app/javascript/lightning_ui_kit/controllers/clipboard_controller.js
+- app/javascript/lightning_ui_kit/controllers/combobox_controller.js
 - app/javascript/lightning_ui_kit/controllers/dropdown_controller.js
 - app/javascript/lightning_ui_kit/controllers/dropzone_controller.js
+- app/javascript/lightning_ui_kit/controllers/field_controller.js
+- app/javascript/lightning_ui_kit/controllers/layout_controller.js
 - app/javascript/lightning_ui_kit/controllers/main_controller.js
 - app/javascript/lightning_ui_kit/controllers/modal_controller.js
 - app/javascript/lightning_ui_kit/controllers/reveal_controller.js
 - app/javascript/lightning_ui_kit/controllers/switch_controller.js
 - app/javascript/lightning_ui_kit/controllers/toast_controller.js
+- app/javascript/lightning_ui_kit/controllers/tooltip_controller.js
 - app/javascript/lightning_ui_kit/index.js
 - config/deploy.yml
 - config/initializers/heroicons.rb
@@ -189,7 +189,7 @@ licenses:
 metadata:
   homepage_uri: https://github.com/k0va1/lightning_ui_kit
   source_code_uri: https://github.com/k0va1/lightning_ui_kit
-  changelog_uri: https://github.com/k0va1/lightning_ui_kit/blob/main/CHANGELOG.md
+  changelog_uri: https://github.com/k0va1/lightning_ui_kit/blob/master/CHANGELOG.md
 post_install_message:
 rdoc_options: []
 require_paths: