ruby_ui 1.0.0.pre.alpha.4 → 1.0.0.rc1

data/lib/{rbui → ruby_ui}/popover/popover_content.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class PopoverContent < Base
     def view_template(&)
       div(**attrs, &)
@@ -11,7 +11,7 @@ module RBUI
     def default_attrs
       {
         data: {
-          rbui__popover_target: "content"
+          ruby_ui__popover_target: "content"
         },
         class: [
           "hidden z-50 rounded-md border bg-background p-1 text-foreground shadow-md outline-none",

data/lib/ruby_ui/popover/popover_controller.js

@@ -0,0 +1,107 @@
+import { Controller } from "@hotwired/stimulus";
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  autoUpdate,
+} from "@floating-ui/dom";
+
+export default class extends Controller {
+  static targets = ["trigger", "content"];
+  static values = {
+    open: { type: Boolean, default: false },
+    options: { type: Object, default: {} },
+    trigger: { type: String, default: "hover" },
+  };
+
+  connect() {
+    this.closeTimeout = null;
+    this.cleanup = null;
+    this.addEventListeners();
+  }
+
+  disconnect() {
+    this.removeEventListeners();
+    if (this.cleanup) {
+      this.cleanup();
+    }
+  }
+
+  addEventListeners() {
+    if (this.triggerValue === "hover") {
+      this.triggerTarget.addEventListener("mouseenter", this.handleMouseEnter);
+      this.triggerTarget.addEventListener("mouseleave", this.handleMouseLeave);
+      this.contentTarget.addEventListener("mouseenter", this.handleMouseEnter);
+      this.contentTarget.addEventListener("mouseleave", this.handleMouseLeave);
+    } else if (this.triggerValue === "click") {
+      this.triggerTarget.addEventListener("click", this.handleClick);
+      document.addEventListener("click", this.handleOutsideClick);
+    }
+  }
+
+  removeEventListeners() {
+    this.triggerTarget.removeEventListener("mouseenter", this.handleMouseEnter);
+    this.triggerTarget.removeEventListener("mouseleave", this.handleMouseLeave);
+    this.contentTarget.removeEventListener("mouseenter", this.handleMouseEnter);
+    this.contentTarget.removeEventListener("mouseleave", this.handleMouseLeave);
+    this.triggerTarget.removeEventListener("click", this.handleClick);
+    document.removeEventListener("click", this.handleOutsideClick);
+  }
+
+  handleMouseEnter = () => {
+    clearTimeout(this.closeTimeout);
+    this.openValue = true;
+    this.showPopover();
+  };
+
+  handleMouseLeave = () => {
+    this.closeTimeout = setTimeout(() => {
+      this.openValue = false;
+      this.hidePopover();
+    }, 100);
+  };
+
+  handleClick = (event) => {
+    event.stopPropagation();
+    this.openValue = !this.openValue;
+    this.openValue ? this.showPopover() : this.hidePopover();
+  };
+
+  handleOutsideClick = (event) => {
+    if (!this.element.contains(event.target) && this.openValue) {
+      this.openValue = false;
+      this.hidePopover();
+    }
+  };
+
+  showPopover() {
+    this.contentTarget.classList.remove("hidden");
+    this.updatePosition();
+  }
+
+  hidePopover() {
+    this.contentTarget.classList.add("hidden");
+    if (this.cleanup) {
+      this.cleanup();
+    }
+  }
+
+  updatePosition() {
+    if (this.cleanup) {
+      this.cleanup();
+    }
+
+    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => {
+      computePosition(this.triggerTarget, this.contentTarget, {
+        placement: this.optionsValue.placement || "bottom",
+        middleware: [flip(), shift(), offset(8)],
+      }).then(({ x, y }) => {
+        Object.assign(this.contentTarget.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      });
+    });
+  }
+}

data/lib/{rbui → ruby_ui}/popover/popover_trigger.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class PopoverTrigger < Base
     def view_template(&)
       div(**attrs, &)
@@ -11,7 +11,7 @@ module RBUI
     def default_attrs
       {
         data: {
-          rbui__popover_target: "trigger"
+          ruby_ui__popover_target: "trigger"
         },
         class: "inline-block"
       }

data/lib/ruby_ui/progress/progress.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Progress < Base
+    def initialize(value: 0, **attrs)
+      @value = value.to_f.clamp(0, 100)
+
+      super(**attrs)
+    end
+
+    def view_template
+      div(**attrs) do
+        div(**indicator_attrs)
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        role: "progressbar",
+        aria_valuenow: @value,
+        aria_valuemin: 0,
+        aria_valuemax: 100,
+        aria_valuetext: "#{@value}%",
+        class: "relative h-2 overflow-hidden rounded-full bg-primary/20 [&>*]:bg-primary"
+      }
+    end
+
+    def indicator_attrs
+      {
+        class: "h-full w-full flex-1",
+        style: "transform: translateX(-#{100 - @value}%)"
+      }
+    end
+  end
+end

data/lib/ruby_ui/radio_button/radio_button.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class RadioButton < Base
+    def view_template
+      input(**attrs)
+    end
+
+    private
+
+    def default_attrs
+      {
+        type: "radio",
+        data: {
+          ruby_ui__form_field_target: "input",
+          action: "change->ruby-ui--form-field#onInput invalid->ruby-ui--form-field#onInvalid"
+        },
+        class: [
+          "h-4 w-4 p-0 border-primary rounded-full flex-none",
+          "disabled:cursor-not-allowed disabled:opacity-50"
+        ]
+      }
+    end
+  end
+end

data/lib/{rbui → ruby_ui}/select/select.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class Select < Base
     def view_template(&)
       div(**attrs, &)
@@ -11,10 +11,10 @@ module RBUI
     def default_attrs
       {
         data: {
-          controller: "rbui--select",
-          rbui__select_open_value: "false",
-          action: "click@window->rbui--select#clickOutside",
-          rbui__select_rbui__select_item_outlet: ".item"
+          controller: "ruby-ui--select",
+          ruby_ui__select_open_value: "false",
+          action: "click@window->ruby-ui--select#clickOutside",
+          ruby_ui__select_ruby_ui__select_item_outlet: ".item"
         },
         class: "group/select w-full relative"
       }

data/lib/{rbui → ruby_ui}/select/select_content.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class SelectContent < Base
     def initialize(**attrs)
       @id = "content#{SecureRandom.hex(4)}"
@@ -10,7 +10,7 @@ module RBUI
     def view_template(&block)
       div(**attrs) do
         div(
-          class: "max-h-96 min-w-max overflow-auto rounded-md border bg-background p-1 text-foreground shadow-md animate-out group-data-[rbui--select-open-value=true]/select:animate-in fade-out-0 group-data-[rbui--select-open-value=true]/select:fade-in-0 zoom-out-95 group-data-[rbui--select-open-value=true]/select:zoom-in-95 slide-in-from-top-2", &block
+          class: "max-h-96 w-full text-wrap overflow-auto rounded-md border bg-background p-1 text-foreground shadow-md animate-out group-data-[ruby-ui--select-open-value=true]/select:animate-in fade-out-0 group-data-[ruby-ui--select-open-value=true]/select:fade-in-0 zoom-out-95 group-data-[ruby-ui--select-open-value=true]/select:zoom-in-95 slide-in-from-top-2", &block
         )
       end
     end
@@ -23,7 +23,7 @@ module RBUI
         role: "listbox",
         tabindex: "-1",
         data: {
-          rbui__select_target: "content"
+          ruby_ui__select_target: "content"
         },
         class: "hidden w-full absolute top-0 left-0 z-50"
       }

data/lib/ruby_ui/select/select_controller.js

@@ -0,0 +1,171 @@
+import { Controller } from "@hotwired/stimulus";
+import { computePosition, autoUpdate, offset, flip } from "@floating-ui/dom";
+
+export default class extends Controller {
+  static targets = ["trigger", "content", "input", "value", "item"];
+  static values = { open: Boolean };
+  static outlets = ["ruby-ui--select-item"];
+
+  constructor(...args) {
+    super(...args);
+    this.cleanup;
+  }
+
+  connect() {
+    this.setFloatingElement();
+    this.generateItemsIds();
+  }
+
+  disconnect() {
+    this.cleanup();
+  }
+
+  selectItem(event) {
+    event.preventDefault();
+
+    this.rubyUiSelectItemOutlets.forEach((item) =>
+      item.handleSelectItem(event),
+    );
+
+    const oldValue = this.inputTarget.value;
+    const newValue = event.target.dataset.value;
+
+    this.inputTarget.value = newValue;
+    this.valueTarget.innerText = event.target.innerText;
+
+    this.dispatchOnChange(oldValue, newValue);
+    this.closeContent();
+  }
+
+  onClick() {
+    this.toogleContent();
+
+    if (this.openValue) {
+      this.setFocusAndCurrent();
+    } else {
+      this.resetCurrent();
+    }
+  }
+
+  handleKeyDown(event) {
+    event.preventDefault();
+
+    const currentIndex = this.itemTargets.findIndex(
+      (item) => item.getAttribute("aria-current") === "true",
+    );
+
+    if (currentIndex + 1 < this.itemTargets.length) {
+      this.itemTargets[currentIndex].removeAttribute("aria-current");
+      this.setAriaCurrentAndActiveDescendant(currentIndex + 1);
+    }
+  }
+
+  handleKeyUp(event) {
+    event.preventDefault();
+
+    const currentIndex = this.itemTargets.findIndex(
+      (item) => item.getAttribute("aria-current") === "true",
+    );
+
+    if (currentIndex > 0) {
+      this.itemTargets[currentIndex].removeAttribute("aria-current");
+      this.setAriaCurrentAndActiveDescendant(currentIndex - 1);
+    }
+  }
+
+  handleEsc(event) {
+    event.preventDefault();
+    this.closeContent();
+  }
+
+  setFocusAndCurrent() {
+    const selectedItem = this.itemTargets.find(
+      (item) => item.getAttribute("aria-selected") === "true",
+    );
+
+    if (selectedItem) {
+      selectedItem.focus({ preventScroll: true });
+      selectedItem.setAttribute("aria-current", "true");
+      this.triggerTarget.setAttribute(
+        "aria-activedescendant",
+        selectedItem.getAttribute("id"),
+      );
+    } else {
+      this.itemTarget.focus({ preventScroll: true });
+      this.itemTarget.setAttribute("aria-current", "true");
+      this.triggerTarget.setAttribute(
+        "aria-activedescendant",
+        this.itemTarget.getAttribute("id"),
+      );
+    }
+  }
+
+  resetCurrent() {
+    this.itemTargets.forEach((item) => item.removeAttribute("aria-current"));
+  }
+
+  clickOutside(event) {
+    if (!this.openValue) return;
+    if (this.element.contains(event.target)) return;
+
+    event.preventDefault();
+    this.toogleContent();
+  }
+
+  toogleContent() {
+    this.openValue = !this.openValue;
+    this.contentTarget.classList.toggle("hidden");
+    this.triggerTarget.setAttribute("aria-expanded", this.openValue);
+  }
+
+  setFloatingElement() {
+    this.cleanup = autoUpdate(this.triggerTarget, this.contentTarget, () => {
+      computePosition(this.triggerTarget, this.contentTarget, {
+        middleware: [offset(4), flip()],
+      }).then(({ x, y }) => {
+        Object.assign(this.contentTarget.style, {
+          left: `${x}px`,
+          top: `${y}px`,
+        });
+      });
+    });
+  }
+
+  generateItemsIds() {
+    const contentId = this.contentTarget.getAttribute("id");
+    this.triggerTarget.setAttribute("aria-controls", contentId);
+
+    this.itemTargets.forEach((item, index) => {
+      item.id = `${contentId}-${index}`;
+    });
+  }
+
+  setAriaCurrentAndActiveDescendant(currentIndex) {
+    const currentItem = this.itemTargets[currentIndex];
+    currentItem.focus({ preventScroll: true });
+    currentItem.setAttribute("aria-current", "true");
+    this.triggerTarget.setAttribute(
+      "aria-activedescendant",
+      currentItem.getAttribute("id"),
+    );
+  }
+
+  closeContent() {
+    this.toogleContent();
+    this.resetCurrent();
+
+    this.triggerTarget.setAttribute("aria-activedescendant", true);
+    this.triggerTarget.focus({ preventScroll: true });
+  }
+
+  dispatchOnChange(oldValue, newValue) {
+    if (oldValue === newValue) return;
+
+    const event = new InputEvent("change", {
+      bubbles: true,
+      cancelable: true,
+    });
+
+    this.inputTarget.dispatchEvent(event);
+  }
+}

data/lib/{rbui → ruby_ui}/select/select_group.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class SelectGroup < Base
     def view_template(&)
       div(**attrs, &)

data/lib/{rbui → ruby_ui}/select/select_input.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class SelectInput < Base
     def view_template
       input(**attrs)
@@ -12,9 +12,9 @@ module RBUI
       {
         class: "hidden",
         data: {
-          rbui__select_target: "input",
-          rbui__form_field_target: "input",
-          action: "change->rbui--form-field#onChange invalid->rbui--form-field#onInvalid"
+          ruby_ui__select_target: "input",
+          ruby_ui__form_field_target: "input",
+          action: "change->ruby-ui--form-field#onChange invalid->ruby-ui--form-field#onInvalid"
         }
       }
     end

data/lib/{rbui → ruby_ui}/select/select_item.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class SelectItem < Base
     def initialize(value: nil, **attrs)
       @value = value
@@ -39,9 +39,9 @@ module RBUI
         tabindex: "0",
         class: "item group relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         data: {
-          controller: "rbui--select-item",
-          action: "click->rbui--select#selectItem keydown.enter->rbui--select#selectItem keydown.down->rbui--select#handleKeyDown keydown.up->rbui--select#handleKeyUp keydown.esc->rbui--select#handleEsc",
-          rbui__select_target: "item"
+          controller: "ruby-ui--select-item",
+          action: "click->ruby-ui--select#selectItem keydown.enter->ruby-ui--select#selectItem keydown.down->ruby-ui--select#handleKeyDown keydown.up->ruby-ui--select#handleKeyUp keydown.esc->ruby-ui--select#handleEsc",
+          ruby_ui__select_target: "item"
         },
         data_value: @value,
         data_orientation: "vertical",

data/lib/ruby_ui/select/select_item_controller.js

@@ -0,0 +1,11 @@
+import { Controller } from "@hotwired/stimulus";
+export default class extends Controller {
+
+  handleSelectItem({ target }) {
+    if (this.element.dataset.value == target.dataset.value) {
+      this.element.setAttribute("aria-selected", true);
+    } else {
+      this.element.removeAttribute("aria-selected");
+    }
+  }
+}

data/lib/{rbui → ruby_ui}/select/select_label.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class SelectLabel < Base
     def view_template(&)
       h3(**attrs, &)

data/lib/{rbui → ruby_ui}/select/select_trigger.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class SelectTrigger < Base
     def view_template(&block)
       button(**attrs) do
@@ -34,8 +34,8 @@ module RBUI
     def default_attrs
       {
         data: {
-          action: "rbui--select#onClick",
-          rbui__select_target: "trigger"
+          action: "ruby-ui--select#onClick",
+          ruby_ui__select_target: "trigger"
         },
         type: "button",
         role: "combobox",

data/lib/{rbui → ruby_ui}/select/select_value.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class SelectValue < Base
     def initialize(placeholder: nil, **attrs)
       @placeholder = placeholder
@@ -18,9 +18,9 @@ module RBUI
     def default_attrs
       {
         data: {
-          rbui__select_target: "value"
+          ruby_ui__select_target: "value"
         },
-        class: "pointer-events-none"
+        class: "truncate pointer-events-none"
       }
     end
   end

data/lib/ruby_ui/separator/separator.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class Separator < Base
+    ORIENTATIONS = %i[horizontal vertical].freeze
+
+    def initialize(as: :div, orientation: :horizontal, decorative: true, **attrs)
+      raise ArgumentError, "Invalid orientation: #{orientation}" unless ORIENTATIONS.include?(orientation.to_sym)
+
+      @as = as.to_sym
+      @orientation = orientation.to_sym
+      @decorative = decorative
+      super(**attrs)
+    end
+
+    def view_template(&)
+      tag(@as, **attrs, &)
+    end
+
+    private
+
+    def default_attrs
+      {
+        role: (@decorative ? "none" : "separator"),
+        class: [
+          "shrink-0 bg-border",
+          orientation_classes
+        ]
+      }
+    end
+
+    def orientation_classes
+      return "h-[1px] w-full" if @orientation == :horizontal
+
+      "h-full w-[1px]"
+    end
+  end
+end

data/lib/{rbui → ruby_ui}/sheet/sheet.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class Sheet < Base
     def view_template(&)
       div(**attrs, &)
@@ -10,7 +10,7 @@ module RBUI
 
     def default_attrs
       {
-        data: {controller: "rbui--sheet"}
+        data: {controller: "ruby-ui--sheet"}
       }
     end
   end

data/lib/{rbui → ruby_ui}/sheet/sheet_content.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class SheetContent < Base
     SIDE_CLASS = {
       top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
@@ -16,8 +16,8 @@ module RBUI
     end
 
     def view_template(&block)
-      template_tag(data: {rbui__sheet_target: "content"}) do
-        div(data: {controller: "rbui--sheet-content"}) do
+      template(data: {ruby_ui__sheet_target: "content"}) do
+        div(data: {controller: "ruby-ui--sheet-content"}) do
           backdrop
           div(**attrs) do
             block&.call
@@ -32,18 +32,18 @@ module RBUI
     def default_attrs
       {
         data_state: "open", # For animate in
-        class: tokens(
+        class: [
           "fixed pointer-events-auto z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
           @side_classes
-        )
+        ]
       }
     end
 
     def close_button
       button(
         type: "button",
-        class: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
-        data_action: "click->rbui--sheet-content#close"
+        class: "absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground",
+        data_action: "click->ruby-ui--sheet-content#close"
       ) do
         svg(
           width: "15",
@@ -68,7 +68,7 @@ module RBUI
     def backdrop
       div(
         data_state: "open",
-        data_action: "click->rbui--sheet-content#close",
+        data_action: "click->ruby-ui--sheet-content#close",
         class:
               "fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
       )

data/lib/ruby_ui/sheet/sheet_content_controller.js

@@ -0,0 +1,7 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  close() {
+    this.element.remove()
+  }
+}

data/lib/ruby_ui/sheet/sheet_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["content"]
+
+  open() {
+    document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML)
+  }
+}

data/lib/{rbui → ruby_ui}/sheet/sheet_description.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class SheetDescription < Base
     def view_template(&)
       p(**attrs, &)

data/lib/{rbui → ruby_ui}/sheet/sheet_footer.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-module RBUI
+module RubyUI
   class SheetFooter < Base
     def view_template(&)
       div(**attrs, &)