shadcn-rails 0.2.0 → 0.2.1

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

@@ -1,19 +1,23 @@
 import { Controller } from "@hotwired/stimulus"
 import { useClickOutside } from "stimulus-use"
+import { positionFloating } from "../utils/floating"
 
 /**
  * Select controller for custom select dropdowns
- * Uses stimulus-use for click outside detection
+ * Uses Floating UI for smart positioning and stimulus-use for click outside detection
  */
 export default class extends Controller {
   static targets = ["trigger", "content", "input", "item", "display", "checkIcon"]
   static values = {
-    value: String
+    value: String,
+    placement: { type: String, default: "bottom-start" },
+    sameWidth: { type: Boolean, default: true }
   }
 
   connect() {
     this.isOpen = false
     this.focusedIndex = -1
+    this.cleanupFloating = null
 
     // Use stimulus-use for click outside detection
     useClickOutside(this)
@@ -26,6 +30,14 @@ export default class extends Controller {
 
   disconnect() {
     this.close()
+    this.cleanupPositioning()
+  }
+
+  cleanupPositioning() {
+    if (this.cleanupFloating) {
+      this.cleanupFloating()
+      this.cleanupFloating = null
+    }
   }
 
   toggle(event) {
@@ -42,15 +54,18 @@ export default class extends Controller {
 
     this.isOpen = true
 
-    // Set trigger width as CSS variable for dropdown sizing
-    if (this.hasTriggerTarget && this.hasContentTarget) {
-      const triggerWidth = this.triggerTarget.offsetWidth
-      this.contentTarget.style.setProperty('--radix-select-trigger-width', `${triggerWidth}px`)
-    }
-
     if (this.hasContentTarget) {
       this.contentTarget.hidden = false
       this.contentTarget.dataset.state = "open"
+
+      // Use Floating UI for smart positioning
+      if (this.hasTriggerTarget) {
+        this.cleanupFloating = positionFloating(this.triggerTarget, this.contentTarget, {
+          placement: this.placementValue,
+          sameWidth: this.sameWidthValue,
+          maxHeight: 384 // max-h-96
+        })
+      }
     }
 
     if (this.hasTriggerTarget) {
@@ -75,6 +90,9 @@ export default class extends Controller {
 
     this.isOpen = false
 
+    // Cleanup Floating UI auto-update
+    this.cleanupPositioning()
+
     if (this.hasContentTarget) {
       this.contentTarget.dataset.state = "closed"
       setTimeout(() => {

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

@@ -1,7 +1,9 @@
 import { Controller } from "@hotwired/stimulus"
+import { positionFloating } from "../utils/floating"
 
 /**
  * Tooltip controller for contextual information
+ * Uses Floating UI for smart positioning
  */
 export default class extends Controller {
   static targets = ["trigger", "content"]
@@ -15,10 +17,25 @@ export default class extends Controller {
   connect() {
     this.showTimeout = null
     this.hideTimeout = null
+    this.cleanupFloating = null
   }
 
   disconnect() {
     this.clearTimeouts()
+    this.cleanupPositioning()
+  }
+
+  cleanupPositioning() {
+    if (this.cleanupFloating) {
+      this.cleanupFloating()
+      this.cleanupFloating = null
+    }
+  }
+
+  get placement() {
+    // Convert side/align to Floating UI placement
+    const align = this.alignValue === "center" ? "" : `-${this.alignValue}`
+    return `${this.sideValue}${align}`
   }
 
   show() {
@@ -28,7 +45,14 @@ export default class extends Controller {
       if (this.hasContentTarget) {
         this.contentTarget.hidden = false
         this.contentTarget.dataset.state = "open"
-        this.positionTooltip()
+
+        // Use Floating UI for smart positioning
+        if (this.hasTriggerTarget) {
+          this.cleanupFloating = positionFloating(this.triggerTarget, this.contentTarget, {
+            placement: this.placement,
+            offset: 8
+          })
+        }
       }
     }, this.delayValue)
   }
@@ -36,6 +60,9 @@ export default class extends Controller {
   hide() {
     this.clearTimeouts()
 
+    // Cleanup Floating UI
+    this.cleanupPositioning()
+
     this.hideTimeout = setTimeout(() => {
       if (this.hasContentTarget) {
         this.contentTarget.dataset.state = "closed"
@@ -56,62 +83,4 @@ export default class extends Controller {
       this.hideTimeout = null
     }
   }
-
-  positionTooltip() {
-    if (!this.hasContentTarget || !this.hasTriggerTarget) return
-
-    const trigger = this.triggerTarget.getBoundingClientRect()
-    const tooltip = this.contentTarget
-    const tooltipRect = tooltip.getBoundingClientRect()
-
-    // Reset positioning
-    tooltip.style.position = "absolute"
-    tooltip.style.top = ""
-    tooltip.style.bottom = ""
-    tooltip.style.left = ""
-    tooltip.style.right = ""
-    tooltip.style.transform = ""
-
-    const gap = 8
-
-    switch (this.sideValue) {
-      case "top":
-        tooltip.style.bottom = "100%"
-        tooltip.style.marginBottom = `${gap}px`
-        break
-      case "bottom":
-        tooltip.style.top = "100%"
-        tooltip.style.marginTop = `${gap}px`
-        break
-      case "left":
-        tooltip.style.right = "100%"
-        tooltip.style.marginRight = `${gap}px`
-        tooltip.style.top = "50%"
-        tooltip.style.transform = "translateY(-50%)"
-        break
-      case "right":
-        tooltip.style.left = "100%"
-        tooltip.style.marginLeft = `${gap}px`
-        tooltip.style.top = "50%"
-        tooltip.style.transform = "translateY(-50%)"
-        break
-    }
-
-    if (this.sideValue === "top" || this.sideValue === "bottom") {
-      switch (this.alignValue) {
-        case "start":
-          tooltip.style.left = "0"
-          break
-        case "center":
-          tooltip.style.left = "50%"
-          tooltip.style.transform = "translateX(-50%)"
-          break
-        case "end":
-          tooltip.style.right = "0"
-          break
-      }
-    }
-
-    tooltip.dataset.side = this.sideValue
-  }
 }

data/app/assets/javascripts/shadcn/index.js

@@ -48,6 +48,9 @@ import TooltipController from "./controllers/tooltip_controller"
 import InputOtpController from "./controllers/input_otp_controller"
 import SidebarController from "./controllers/sidebar_controller"
 
+// Import floating utility
+import { positionFloating, positionAtPoint } from "./utils/floating"
+
 // Export individual controllers
 export {
   BaseMenuController,
@@ -82,7 +85,10 @@ export {
   ToggleController,
   ToggleGroupController,
   TooltipController,
-  SidebarController
+  SidebarController,
+  // Utilities
+  positionFloating,
+  positionAtPoint
 }
 
 // Controller definitions for registration

data/app/assets/javascripts/shadcn/utils/floating.js

@@ -0,0 +1,179 @@
+import { computePosition, autoUpdate, flip, shift, offset, size } from "@floating-ui/dom"
+
+/**
+ * Floating UI positioning utility for shadcn-rails components
+ *
+ * Provides smart positioning for dropdowns, popovers, tooltips, etc.
+ * that automatically handles:
+ * - Viewport edge detection (flip to opposite side)
+ * - Sliding along axis to stay in view (shift)
+ * - Consistent spacing (offset)
+ * - Dynamic content sizing
+ */
+
+/**
+ * Default middleware configuration
+ */
+const defaultMiddleware = [
+  offset(4),
+  flip({
+    fallbackAxisSideDirection: "start",
+    crossAxis: false
+  }),
+  shift({ padding: 8 })
+]
+
+/**
+ * Middleware that includes size constraints for dropdowns/selects
+ */
+const sizeMiddleware = (options = {}) => size({
+  apply({ availableWidth, availableHeight, elements }) {
+    Object.assign(elements.floating.style, {
+      maxWidth: `${Math.max(0, availableWidth)}px`,
+      maxHeight: options.maxHeight ? `${Math.min(options.maxHeight, availableHeight)}px` : `${Math.max(0, availableHeight - 10)}px`
+    })
+  },
+  padding: 10
+})
+
+/**
+ * Position a floating element relative to a reference element
+ *
+ * @param {HTMLElement} reference - The trigger/reference element
+ * @param {HTMLElement} floating - The floating content element
+ * @param {Object} options - Positioning options
+ * @param {string} options.placement - Placement (top, bottom, left, right, with -start/-end variants)
+ * @param {number} options.offset - Offset distance in pixels (default: 4)
+ * @param {boolean} options.sameWidth - Make floating element same width as reference
+ * @param {number} options.maxHeight - Maximum height for the floating element
+ * @param {Function} options.onPositioned - Callback after positioning
+ * @returns {Function} Cleanup function to stop auto-updates
+ */
+export function positionFloating(reference, floating, options = {}) {
+  const {
+    placement = "bottom-start",
+    offset: offsetValue = 4,
+    sameWidth = false,
+    maxHeight = null,
+    onPositioned = null
+  } = options
+
+  // Build middleware array
+  const middleware = [
+    offset(offsetValue),
+    flip({
+      fallbackAxisSideDirection: "start",
+      crossAxis: false
+    }),
+    shift({ padding: 8 })
+  ]
+
+  // Add size middleware if needed
+  if (maxHeight || sameWidth) {
+    middleware.push(size({
+      apply({ availableWidth, availableHeight, elements, rects }) {
+        const styles = {}
+
+        if (sameWidth) {
+          styles.width = `${rects.reference.width}px`
+          styles.minWidth = `${rects.reference.width}px`
+        }
+
+        if (maxHeight) {
+          styles.maxHeight = `${Math.min(maxHeight, availableHeight - 10)}px`
+        } else {
+          styles.maxHeight = `${Math.max(0, availableHeight - 10)}px`
+        }
+
+        Object.assign(elements.floating.style, styles)
+      },
+      padding: 10
+    }))
+  }
+
+  // Set up auto-updating position
+  const cleanup = autoUpdate(reference, floating, () => {
+    computePosition(reference, floating, {
+      placement,
+      middleware
+    }).then(({ x, y, placement: finalPlacement }) => {
+      // Apply position
+      Object.assign(floating.style, {
+        position: "absolute",
+        left: `${x}px`,
+        top: `${y}px`
+      })
+
+      // Update data-side attribute for animations
+      const side = finalPlacement.split("-")[0]
+      floating.dataset.side = side
+
+      // Call callback if provided
+      if (onPositioned) {
+        onPositioned({ x, y, placement: finalPlacement })
+      }
+    })
+  })
+
+  return cleanup
+}
+
+/**
+ * Position a context menu at specific coordinates
+ *
+ * @param {HTMLElement} floating - The floating content element
+ * @param {number} x - X coordinate (clientX from event)
+ * @param {number} y - Y coordinate (clientY from event)
+ * @param {Object} options - Positioning options
+ * @returns {void}
+ */
+export function positionAtPoint(floating, x, y, options = {}) {
+  const { maxHeight = null } = options
+
+  // Create a virtual reference element at the click point
+  const virtualRef = {
+    getBoundingClientRect() {
+      return {
+        width: 0,
+        height: 0,
+        x,
+        y,
+        top: y,
+        left: x,
+        right: x,
+        bottom: y
+      }
+    }
+  }
+
+  const middleware = [
+    offset(4),
+    flip(),
+    shift({ padding: 8 })
+  ]
+
+  if (maxHeight) {
+    middleware.push(size({
+      apply({ availableHeight, elements }) {
+        elements.floating.style.maxHeight = `${Math.min(maxHeight, availableHeight - 10)}px`
+      },
+      padding: 10
+    }))
+  }
+
+  computePosition(virtualRef, floating, {
+    placement: "bottom-start",
+    middleware
+  }).then(({ x: posX, y: posY, placement }) => {
+    Object.assign(floating.style, {
+      position: "fixed",
+      left: `${posX}px`,
+      top: `${posY}px`
+    })
+
+    const side = placement.split("-")[0]
+    floating.dataset.side = side
+  })
+}
+
+export { computePosition, autoUpdate, flip, shift, offset, size }

data/app/assets/stylesheets/shadcn/base.css

@@ -302,6 +302,29 @@ body {
   }
 }
 
+/* Tooltip animations - subtle pop effect */
+@keyframes tooltip-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96) translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+
+@keyframes tooltip-out {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96) translateY(2px);
+  }
+}
+
 /* ============================================
    Animation Utility Classes
    ============================================ */
@@ -386,6 +409,15 @@ body {
   animation-name: slide-out-to-right;
 }
 
+/* Tooltip animation classes */
+.animate-tooltip-in {
+  animation: tooltip-in 150ms ease-out both;
+}
+
+.animate-tooltip-out {
+  animation: tooltip-out 100ms ease-in both;
+}
+
 .animate-spin {
   animation: spin 1s linear infinite;
 }

data/app/components/shadcn/accordion_component.html.erb

@@ -0,0 +1,8 @@
+<div class="<%= accordion_classes %>"
+     data-controller="shadcn--accordion"
+     data-shadcn--accordion-type-value="<%= @type %>"
+     data-shadcn--accordion-collapsible-value="<%= @collapsible %>"
+     <% if @default_value %>data-shadcn--accordion-default-value="<%= default_value_string %>"<% end %>
+     <%= tag_attributes %>>
+  <%= accordion_content %>
+</div>

data/app/components/shadcn/accordion_component.rb

@@ -37,27 +37,18 @@ module Shadcn
       @default_value = default_value
     end
 
-    def call
-      content_tag(:div, accordion_content, accordion_attributes)
-    end
-
     private
 
+    def accordion_classes
+      class_name
+    end
+
     def accordion_content
       safe_join([items, content].compact.flatten)
     end
 
-    def accordion_attributes
-      attrs = {
-        class: class_name,
-        "data-controller": "shadcn--accordion",
-        "data-shadcn--accordion-type-value": @type.to_s,
-        "data-shadcn--accordion-collapsible-value": @collapsible.to_s,
-        "data-shadcn--accordion-default-value": Array(@default_value).join(",")
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def default_value_string
+      Array(@default_value).join(",")
     end
   end
 end

data/app/components/shadcn/alert_component.html.erb

@@ -0,0 +1,6 @@
+<div role="alert" class="<%= alert_classes %>" <%= tag_attributes %>>
+  <%= icon if icon? %>
+  <%= title if title? %>
+  <%= description if description? %>
+  <%= content %>
+</div>

data/app/components/shadcn/alert_component.rb

@@ -48,28 +48,10 @@ module Shadcn
       @variant = variant.to_sym
     end
 
-    def call
-      content_tag(:div, alert_content, alert_attributes)
-    end
-
     private
 
-    def alert_content
-      safe_join([icon, title, description, content].compact)
-    end
-
     def alert_classes
       cn(BASE_CLASSES, VARIANTS[@variant], class_name)
     end
-
-    def alert_attributes
-      attrs = {
-        class: alert_classes,
-        role: "alert"
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
-    end
   end
 end

data/app/components/shadcn/alert_dialog_component.html.erb

@@ -0,0 +1,12 @@
+<div class="<%= alert_dialog_classes %>"
+     data-controller="<%= alert_dialog_data_attrs[:controller] %>"
+     data-shadcn--dialog-open-value="<%= alert_dialog_data_attrs[:"shadcn--dialog-open-value"] %>"
+     data-shadcn--dialog-modal-value="<%= alert_dialog_data_attrs[:"shadcn--dialog-modal-value"] %>"
+     <%= tag_attributes %>>
+  <% if trigger? %>
+    <div data-shadcn--dialog-target="trigger" data-action="click->shadcn--dialog#open">
+      <%= trigger %>
+    </div>
+  <% end %>
+  <%= body if body? %>
+</div>

data/app/components/shadcn/alert_dialog_component.rb

@@ -34,38 +34,18 @@ module Shadcn
       @open = open
     end
 
-    def call
-      content_tag(:div, dialog_content, dialog_attributes)
-    end
-
     private
 
-    def dialog_content
-      safe_join([
-        trigger_wrapper,
-        body
-      ].compact)
-    end
-
-    def trigger_wrapper
-      return unless trigger
-
-      content_tag(:div, trigger, {
-        "data-shadcn--dialog-target": "trigger",
-        "data-action": "click->shadcn--dialog#open"
-      })
+    def alert_dialog_classes
+      class_name
     end
 
-    def dialog_attributes
-      attrs = {
-        class: class_name,
-        "data-controller": "shadcn--dialog",
-        "data-shadcn--dialog-open-value": @open.to_s,
-        "data-shadcn--dialog-modal-value": "true"
+    def alert_dialog_data_attrs
+      {
+        controller: "shadcn--dialog",
+        "shadcn--dialog-open-value": @open.to_s,
+        "shadcn--dialog-modal-value": "true"
       }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
     end
   end
 end

data/app/components/shadcn/aspect_ratio_component.html.erb

@@ -0,0 +1,7 @@
+<div class="<%= wrapper_classes %>"
+     style="<%= wrapper_style %>"
+     <%= tag_attributes %>>
+  <div class="absolute inset-0" style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;">
+    <%= content %>
+  </div>
+</div>

data/app/components/shadcn/aspect_ratio_component.rb

@@ -21,29 +21,14 @@ module Shadcn
       @ratio = ratio.to_f
     end
 
-    def call
-      content_tag(:div, wrapper_attributes) do
-        content_tag(:div, content, inner_attributes)
-      end
-    end
-
     private
 
-    def wrapper_attributes
-      attrs = {
-        class: cn("relative w-full", class_name),
-        style: "padding-bottom: #{(1.0 / @ratio) * 100}%;"
-      }
-      attrs.merge!(html_options)
-      attrs.merge!(build_data)
-      attrs.compact
+    def wrapper_classes
+      cn("relative w-full", class_name)
     end
 
-    def inner_attributes
-      {
-        class: "absolute inset-0",
-        style: "position: absolute; top: 0; right: 0; bottom: 0; left: 0;"
-      }
+    def wrapper_style
+      "padding-bottom: #{(1.0 / @ratio) * 100}%;"
     end
   end
 end

data/app/components/shadcn/avatar_component.html.erb

@@ -0,0 +1,20 @@
+<span class="<%= avatar_classes %>" <%= tag_attributes %>>
+  <% if has_image? %>
+    <span class="contents" data-controller="shadcn--avatar">
+      <img src="<%= @src %>"
+           alt="<%= @alt %>"
+           class="<%= IMAGE_CLASSES %>"
+           data-shadcn--avatar-target="image"
+           data-action="error->shadcn--avatar#handleError" />
+      <span class="<%= FALLBACK_CLASSES %> hidden" data-shadcn--avatar-target="fallback">
+        <%= fallback_text %>
+      </span>
+    </span>
+  <% elsif has_fallback_slot? %>
+    <%= fallback %>
+  <% else %>
+    <span class="<%= FALLBACK_CLASSES %>">
+      <%= fallback_text %>
+    </span>
+  <% end %>
+</span>