ruby_ui 1.3.0 → 1.6.0

data/lib/ruby_ui/empty/empty_media.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class EmptyMedia < Base
+    VARIANTS = {
+      default: "bg-transparent",
+      icon: "size-10 rounded-xl bg-muted text-foreground [&_svg:not([class*='size-'])]:size-5"
+    }
+
+    def initialize(variant: :default, **attrs)
+      @variant = variant
+      super(**attrs)
+    end
+
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {slot: "empty-icon", variant: @variant},
+        class: [
+          "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+          VARIANTS[@variant]
+        ]
+      }
+    end
+  end
+end

data/lib/ruby_ui/empty/empty_title.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class EmptyTitle < Base
+    def view_template(&)
+      div(**attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {slot: "empty-title"},
+        class: "text-lg font-medium tracking-tight"
+      }
+    end
+  end
+end

data/lib/ruby_ui/form/form_docs.rb

@@ -170,6 +170,95 @@ class Views::Docs::Form < Views::Base
         RUBY
       end
 
+      Heading(level: 2) { "Rails Integration" }
+
+      Text do
+        plain "RubyUI Form components are plain HTML — they work with any form submission strategy. "
+        plain "The recommended approach for Rails apps is to use "
+        InlineLink(href: "https://api.rubyonrails.org/classes/ActionView/Helpers/FormHelper.html#method-i-form_with", target: "_blank") { "form_with" }
+        plain " to generate the "
+        code(class: "font-mono text-sm") { "action" }
+        plain " URL and CSRF token, then pass explicit "
+        code(class: "font-mono text-sm") { "name" }
+        plain " / "
+        code(class: "font-mono text-sm") { "id" }
+        plain " attributes to each RubyUI input so the browser serialises them correctly. "
+        plain "Server-side errors can be surfaced by rendering "
+        code(class: "font-mono text-sm") { "FormFieldError" }
+        plain " with content from "
+        code(class: "font-mono text-sm") { "model.errors.full_messages_for(:attr)" }
+        plain "."
+      end
+
+      Heading(level: 3) { "Minimal Rails form" }
+      Codeblock(<<~RUBY, syntax: :ruby)
+        # In your Phlex view, call form_with via helpers:
+        # form_with(url: users_path, method: :post) passes action + CSRF automatically.
+        #
+        # You can also set action and the CSRF token manually:
+        Form(action: helpers.users_path, method: "post", class: "w-2/3 space-y-6") do
+          input(type: "hidden", name: "authenticity_token", value: helpers.form_authenticity_token)
+
+          FormField do
+            FormFieldLabel(for: "user_email") { "Email" }
+            Input(
+              type: "email",
+              id: "user_email",
+              name: "user[email]",
+              placeholder: "you@example.com",
+              required: true
+            )
+            FormFieldError()
+          end
+
+          Button(type: "submit") { "Continue" }
+        end
+      RUBY
+
+      Heading(level: 3) { "Devise-style login form" }
+      Codeblock(<<~RUBY, syntax: :ruby)
+        # Full sign-in form mirroring Devise session[email] / session[password] params.
+        # Pass backend errors (e.g. "Invalid email or password") into FormFieldError.
+        Form(action: helpers.user_session_path, method: "post", class: "space-y-6") do
+          input(type: "hidden", name: "authenticity_token", value: helpers.form_authenticity_token)
+
+          FormField do
+            FormFieldLabel(for: "session_email") { "Email" }
+            Input(
+              type: "email",
+              id: "session_email",
+              name: "session[email]",
+              placeholder: "you@example.com",
+              autocomplete: "email",
+              required: true
+            )
+            FormFieldError { @error_message }
+          end
+
+          FormField do
+            FormFieldLabel(for: "session_password") { "Password" }
+            Input(
+              type: "password",
+              id: "session_password",
+              name: "session[password]",
+              autocomplete: "current-password",
+              required: true,
+              minlength: "8"
+            )
+            FormFieldError()
+          end
+
+          FormField do
+            div(class: "flex items-center gap-2") do
+              Checkbox(id: "session_remember_me", name: "session[remember_me]", value: "1")
+              FormFieldLabel(for: "session_remember_me") { "Remember me" }
+            end
+          end
+
+          Button(type: "submit", class: "w-full") { "Sign in" }
+        end
+      RUBY
+
       render Components::ComponentSetup::Tabs.new(component_name: component)
 
       render Docs::ComponentsTable.new(component_files(component))

data/lib/ruby_ui/hover_card/hover_card_content.rb

@@ -2,10 +2,8 @@
 
 module RubyUI
   class HoverCardContent < Base
-    def view_template(&block)
-      template(data: {ruby_ui__hover_card_target: "content"}) do
-        div(**attrs, &block)
-      end
+    def view_template(&)
+      div(**attrs, &)
     end
 
     private
@@ -13,9 +11,10 @@ module RubyUI
     def default_attrs
       {
         data: {
-          state: :open
+          ruby_ui__hover_card_target: "content",
+          state: :closed
         },
-        class: "z-50 rounded-md border bg-background p-4 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+        class: "hidden absolute z-50 rounded-md border bg-background p-4 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
       }
     end
   end

data/lib/ruby_ui/hover_card/hover_card_controller.js

@@ -1,106 +1,150 @@
 import { Controller } from "@hotwired/stimulus";
-import tippy from "tippy.js";
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  autoUpdate,
+} from "@floating-ui/dom";
 
 export default class extends Controller {
   static targets = ["trigger", "content", "menuItem"];
   static values = {
-    options: {
-      type: Object,
-      default: {},
-    },
-    // make content width of the trigger element (true/false)
-    matchWidth: {
-      type: Boolean,
-      default: false,
-    }
-  }
+    open: { type: Boolean, default: false },
+    options: { type: Object, default: {} },
+    // make content width match the trigger element (true/false)
+    matchWidth: { type: Boolean, default: false },
+  };
 
   connect() {
-    this.boundHandleKeydown = this.handleKeydown.bind(this); // Bind the function so we can remove it later
-    this.initializeTippy();
+    this.openDelay = this.delayAt(0, 500);
+    this.closeDelay = this.delayAt(1, 250);
+    this.openTimeout = null;
+    this.closeTimeout = null;
+    this.cleanup = null;
     this.selectedIndex = -1;
+    this.boundHandleKeydown = this.handleKeydown.bind(this);
+    this.addEventListeners();
   }
 
   disconnect() {
-    this.destroyTippy();
+    this.removeEventListeners();
+    this.clearTimers();
+    document.removeEventListener("keydown", this.boundHandleKeydown);
+    if (this.cleanup) {
+      this.cleanup();
+      this.cleanup = null;
+    }
   }
 
-  initializeTippy() {
-    const defaultOptions = {
-      content: this.contentTarget.innerHTML,
-      allowHTML: true,
-      interactive: true,
-      onShow: (instance) => {
-        this.matchWidthValue && this.setContentWidth(instance); // ensure content width matches trigger width
-        this.addEventListeners();
-      },
-      onHide: () => {
-        this.removeEventListeners();
-        this.deselectAll();
-      },
-      popperOptions: {
-        modifiers: [
-          {
-            name: "offset",
-            options: {
-              offset: [0, 4]
-            },
-          },
-        ],
-      }
-    };
+  // Supports the tippy-style `delay` option: a number or a [open, close] tuple.
+  delayAt(index, fallback) {
+    const delay = this.optionsValue.delay;
+    if (Array.isArray(delay)) return delay[index] ?? fallback;
+    if (typeof delay === "number") return delay;
+    return fallback;
+  }
 
-    const mergedOptions = { ...this.optionsValue, ...defaultOptions };
-    this.tippy = tippy(this.triggerTarget, mergedOptions);
+  addEventListeners() {
+    this.triggerTarget.addEventListener("mouseenter", this.handleMouseEnter);
+    this.triggerTarget.addEventListener("mouseleave", this.handleMouseLeave);
+    this.triggerTarget.addEventListener("focusin", this.handleMouseEnter);
+    this.triggerTarget.addEventListener("focusout", this.handleMouseLeave);
+    this.contentTarget.addEventListener("mouseenter", this.handleMouseEnter);
+    this.contentTarget.addEventListener("mouseleave", this.handleMouseLeave);
+    this.contentTarget.addEventListener("focusin", this.handleMouseEnter);
+    this.contentTarget.addEventListener("focusout", this.handleMouseLeave);
   }
 
-  destroyTippy() {
-    if (this.tippy) {
-      this.tippy.destroy();
-    }
+  removeEventListeners() {
+    this.triggerTarget.removeEventListener("mouseenter", this.handleMouseEnter);
+    this.triggerTarget.removeEventListener("mouseleave", this.handleMouseLeave);
+    this.triggerTarget.removeEventListener("focusin", this.handleMouseEnter);
+    this.triggerTarget.removeEventListener("focusout", this.handleMouseLeave);
+    this.contentTarget.removeEventListener("mouseenter", this.handleMouseEnter);
+    this.contentTarget.removeEventListener("mouseleave", this.handleMouseLeave);
+    this.contentTarget.removeEventListener("focusin", this.handleMouseEnter);
+    this.contentTarget.removeEventListener("focusout", this.handleMouseLeave);
   }
 
-  setContentWidth(instance) {
-    // box-sizing: border-box
-    const content = instance.popper.querySelector('.tippy-content');
-    if (content) {
-      content.style.width = `${instance.reference.offsetWidth}px`;
-    }
+  handleMouseEnter = () => {
+    this.clearTimers();
+    this.openTimeout = setTimeout(() => this.show(), this.openDelay);
+  };
+
+  handleMouseLeave = () => {
+    this.clearTimers();
+    this.closeTimeout = setTimeout(() => this.hide(), this.closeDelay);
+  };
+
+  clearTimers() {
+    clearTimeout(this.openTimeout);
+    clearTimeout(this.closeTimeout);
   }
 
-  handleContextMenu(event) {
-    event.preventDefault();
-    this.open();
+  show() {
+    this.openValue = true;
+    this.contentTarget.classList.remove("hidden");
+    this.contentTarget.dataset.state = "open";
+    if (this.matchWidthValue) {
+      this.contentTarget.style.width = `${this.triggerTarget.offsetWidth}px`;
+    }
+    document.addEventListener("keydown", this.boundHandleKeydown);
+    this.updatePosition();
   }
 
-  open() {
-    this.tippy.show();
+  hide() {
+    this.openValue = false;
+    this.contentTarget.classList.add("hidden");
+    this.contentTarget.dataset.state = "closed";
+    document.removeEventListener("keydown", this.boundHandleKeydown);
+    this.deselectAll();
+    if (this.cleanup) {
+      this.cleanup();
+      this.cleanup = null;
+    }
   }
 
-  close() {
-    this.tippy.hide();
+  updatePosition() {
+    if (this.cleanup) this.cleanup();
+
+    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => {
+      computePosition(this.triggerTarget, this.contentTarget, {
+        placement: this.optionsValue.placement || "bottom",
+        middleware: [offset(4), flip(), shift({ padding: 8 })],
+      }).then(({ x, y, placement }) => {
+        Object.assign(this.contentTarget.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+        this.contentTarget.dataset.side = placement.split("-")[0];
+      });
+    });
   }
 
   handleKeydown(e) {
-    // return if no menu items (one line fix for)
-    if (this.menuItemTargets.length === 0) { return; }
+    if (e.key === "Escape") {
+      this.hide();
+      return;
+    }
+
+    if (this.menuItemTargets.length === 0) return;
 
-    if (e.key === 'ArrowDown') {
+    if (e.key === "ArrowDown") {
       e.preventDefault();
       this.updateSelectedItem(1);
-    } else if (e.key === 'ArrowUp') {
+    } else if (e.key === "ArrowUp") {
       e.preventDefault();
       this.updateSelectedItem(-1);
-    } else if (e.key === 'Enter' && this.selectedIndex !== -1) {
+    } else if (e.key === "Enter" && this.selectedIndex !== -1) {
       e.preventDefault();
       this.menuItemTargets[this.selectedIndex].click();
     }
   }
 
   updateSelectedItem(direction) {
-    // Check if any of the menuItemTargets have aria-selected="true" and set the selectedIndex to that index
     this.menuItemTargets.forEach((item, index) => {
-      if (item.getAttribute('aria-selected') === 'true') {
+      if (item.getAttribute("aria-selected") === "true") {
         this.selectedIndex = index;
       }
     });
@@ -121,24 +165,17 @@ export default class extends Controller {
   }
 
   toggleAriaSelected(element, isSelected) {
-    // Add or remove attribute
     if (isSelected) {
-      element.setAttribute('aria-selected', 'true');
+      element.setAttribute("aria-selected", "true");
     } else {
-      element.removeAttribute('aria-selected');
+      element.removeAttribute("aria-selected");
     }
   }
 
   deselectAll() {
-    this.menuItemTargets.forEach(item => this.toggleAriaSelected(item, false));
+    this.menuItemTargets.forEach((item) =>
+      this.toggleAriaSelected(item, false)
+    );
     this.selectedIndex = -1;
   }
-
-  addEventListeners() {
-    document.addEventListener('keydown', this.boundHandleKeydown);
-  }
-
-  removeEventListeners() {
-    document.removeEventListener('keydown', this.boundHandleKeydown);
-  }
 }

data/lib/ruby_ui/input_otp/input_otp.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class InputOtp < Base
+    def initialize(length:, pattern: nil, **attrs)
+      @length = length
+      @char_class = pattern || "[0-9]"
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(
+        data: {
+          controller: "ruby-ui--input-otp",
+          ruby_ui__input_otp_length_value: @length,
+          ruby_ui__input_otp_char_class_value: @char_class
+        },
+        class: "relative flex items-center has-disabled:opacity-50"
+      ) do
+        div(class: "flex items-center gap-2", &block)
+        input(**attrs)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        type: "text",
+        inputmode: (@char_class == "[0-9]") ? "numeric" : "text",
+        pattern: "^(?:#{@char_class}){#{@length}}$",
+        maxlength: @length,
+        autocomplete: "one-time-code",
+        data: {
+          ruby_ui__input_otp_target: "input",
+          action: "input->ruby-ui--input-otp#onInput keydown->ruby-ui--input-otp#onKeydown paste->ruby-ui--input-otp#onPaste focus->ruby-ui--input-otp#onFocus blur->ruby-ui--input-otp#onBlur"
+        },
+        class: "absolute inset-0 h-full w-full cursor-text appearance-none border-0 bg-transparent p-0 text-transparent caret-transparent shadow-none outline-none selection:bg-transparent focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 disabled:cursor-not-allowed"
+      }
+    end
+  end
+end

data/lib/ruby_ui/input_otp/input_otp_controller.js

@@ -0,0 +1,128 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="ruby-ui--input-otp"
+export default class extends Controller {
+  static targets = ["input", "slot"]
+  static values = { length: Number, charClass: String }
+
+  connect() {
+    // A server-rendered value (prefilled from a previous submission, a
+    // validation error, etc.) may exceed length or contain characters that
+    // fail pattern. Sanitize it up front so the hidden slots never mask
+    // an invalid/oversized value that would otherwise still get submitted.
+    this.sanitizeValue()
+    this.paint()
+    this.boundOnSelectionChange = this.onSelectionChange.bind(this)
+    document.addEventListener("selectionchange", this.boundOnSelectionChange)
+  }
+
+  disconnect() {
+    document.removeEventListener("selectionchange", this.boundOnSelectionChange)
+  }
+
+  onInput() {
+    this.sanitizeValue()
+    const filtered = this.inputTarget.value
+
+    this.normalizeSelection()
+    this.paint()
+    this.dispatch("input", { detail: { value: filtered } })
+    if (filtered.length === this.lengthValue) {
+      this.dispatch("complete", { detail: { value: filtered } })
+    }
+  }
+
+  onFocus() {
+    const end = this.inputTarget.value.length
+    const start = Math.min(end, this.lengthValue - 1)
+    this.inputTarget.setSelectionRange(start, end)
+    this.paint()
+  }
+
+  onBlur() {
+    this.paint()
+  }
+
+  onKeydown(event) {
+    const moves = { ArrowLeft: -1, ArrowUp: -1, ArrowRight: 1, ArrowDown: 1 }
+    if (!(event.key in moves)) return
+
+    event.preventDefault()
+    const current = this.inputTarget.selectionStart ?? 0
+    const next = Math.min(Math.max(current + moves[event.key], 0), this.lengthValue - 1)
+    const hasChar = next < this.inputTarget.value.length
+    this.inputTarget.setSelectionRange(next, hasChar ? next + 1 : next)
+    this.paint()
+  }
+
+  onPaste(event) {
+    event.preventDefault()
+    const pasted = this.filter(event.clipboardData.getData("text/plain"))
+    if (!pasted) return
+
+    const start = this.inputTarget.selectionStart ?? 0
+    const end = this.inputTarget.selectionEnd ?? start
+    const current = this.inputTarget.value
+    const merged = (current.slice(0, start) + pasted + current.slice(end)).slice(0, this.lengthValue)
+
+    this.inputTarget.value = merged
+    const caret = Math.min(merged.length, this.lengthValue - 1)
+    this.inputTarget.setSelectionRange(caret, merged.length)
+
+    this.paint()
+    this.dispatch("input", { detail: { value: merged } })
+    if (merged.length === this.lengthValue) this.dispatch("complete", { detail: { value: merged } })
+  }
+
+  onSelectionChange() {
+    if (document.activeElement !== this.inputTarget) return
+    this.paint()
+  }
+
+  // After typing, replacing, or deleting, the browser leaves a collapsed
+  // caret. If it landed on a slot that already has a character (not the
+  // true insert-mode end of the value), re-select that character as a
+  // 1-char range so the next keystroke replaces it instead of being
+  // silently dropped by the native maxlength/no-selection behavior.
+  normalizeSelection() {
+    const input = this.inputTarget
+    const value = input.value
+    const s = input.selectionStart
+    const e = input.selectionEnd
+    if (s === null || e === null || s !== e) return
+
+    const isInsertMode = s === value.length && value.length < this.lengthValue
+    if (isInsertMode) return
+
+    const index = Math.min(s, this.lengthValue - 1)
+    input.setSelectionRange(index, index < value.length ? index + 1 : index)
+  }
+
+  filter(raw) {
+    const re = new RegExp(this.charClassValue)
+    return raw.split("").filter((char) => re.test(char)).join("")
+  }
+
+  sanitizeValue() {
+    const filtered = this.filter(this.inputTarget.value).slice(0, this.lengthValue)
+    if (filtered !== this.inputTarget.value) this.inputTarget.value = filtered
+  }
+
+  paint() {
+    const value = this.inputTarget.value
+    const isFocused = document.activeElement === this.inputTarget
+    const start = this.inputTarget.selectionStart ?? value.length
+    const end = this.inputTarget.selectionEnd ?? value.length
+    const activeIndex = Math.min(start, this.lengthValue - 1)
+
+    this.slotTargets.forEach((slot) => {
+      const index = Number(slot.dataset.index)
+      const char = value[index] ?? ""
+      const isActive = isFocused && ((start === end && index === activeIndex) || (index >= start && index < end))
+
+      slot.textContent = char
+      slot.dataset.active = isActive ? "true" : "false"
+      slot.dataset.caret = isActive && char === "" ? "true" : "false"
+    })
+  }
+}