ruby_ui 1.0.0 → 1.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 81eaeaadec3023c062c306ca82163e3ea43f5263a05cfa8241dbf9f3ff28e3f2
-  data.tar.gz: 1c9036dff1203041c8c34dac6b7a5a9c530abeeba9e69b658aa5064b1ea23dfe
+  metadata.gz: 0caf3d89b3375e334dc257510c34bf7f168b295534dc8bf2bfc4dde95d3a6a04
+  data.tar.gz: 55dcc86d6feb87270a5c82915fa635e752b1a7ae1a91d5b30e12af61f91fc13f
 SHA512:
-  metadata.gz: 250e76eff54d1edcfb57f375ac6c0944182f95c3135002a9810d1a33814bbdc9c77b50dfaf4071316f1407282a81383dac841aa486a2337d1b3d1e4c2cf58eb8
-  data.tar.gz: 28f38979ad9df377fa7a941bd6593683ed19d1e18a116bda8f6ba4ea99d5e11e4ceb153eb4a056cdab936ed0f8239918df6023833c60b28af274c3707d4c543d
+  metadata.gz: abcfe605c2dc17b11f2c3cc8dbe5e2db054c95f5e0dac319c883762add2985fb0b7ddd8547c8148504e75ef83971ee7c55c874bffa3505deefe50eb7e8e09f6a
+  data.tar.gz: fbe88cc5c6c8e327209588628340d1225773dcd0a6ce064a657ccaa9eaa163c98d4d2280e966932bdf2c9e7da910ab0a6913cb65093cb4091c026690f88039ac

data/README.md

@@ -26,6 +26,9 @@ Use this as a reference to build your own component libraries.
 
 ## Installation 🚀
 
+> [!NOTE]
+> RubyUI 1.0 requires Ruby 3.2 or later
+
 ### 1. Install the gem
 
 ```bash
@@ -52,6 +55,8 @@ You can generate your components using `ruby_ui:component` generator.
 bin/rails g ruby_ui:component Accordion
 ```
 
+You also can generate all components using `ruby_ui:component:all` generator
+
 ## Documentation 📖
 
 Visit https://rubyui.com/docs/introduction to view the full documentation, including:

data/lib/generators/ruby_ui/component/all_generator.rb

@@ -0,0 +1,22 @@
+module RubyUI
+  module Generators
+    module Component
+      class AllGenerator < Rails::Generators::Base
+        namespace "ruby_ui:component:all"
+
+        source_root File.expand_path("../../../ruby_ui", __dir__)
+        class_option :force, type: :boolean, default: false
+
+        def generate_components
+          say "Generating all components..."
+
+          Dir.children(self.class.source_root).each do |folder_name|
+            next if folder_name.ends_with?(".rb")
+
+            run "bin/rails generate ruby_ui:component #{folder_name} --force #{options["force"]}"
+          end
+        end
+      end
+    end
+  end
+end

data/lib/generators/ruby_ui/component_generator.rb

@@ -8,6 +8,7 @@ module RubyUI
 
       source_root File.expand_path("../../ruby_ui", __dir__)
       argument :component_name, type: :string, required: true
+      class_option :force, type: :boolean, default: false
 
       def generate_component
         if component_not_found?
@@ -23,7 +24,7 @@ module RubyUI
 
         components_file_paths.each do |file_path|
           component_file_name = file_path.split("/").last
-          copy_file file_path, Rails.root.join("app/components/ruby_ui", component_folder_name, component_file_name)
+          copy_file file_path, Rails.root.join("app/components/ruby_ui", component_folder_name, component_file_name), force: options["force"]
         end
       end
 
@@ -34,7 +35,7 @@ module RubyUI
 
         js_controller_file_paths.each do |file_path|
           controller_file_name = file_path.split("/").last
-          copy_file file_path, Rails.root.join("app/javascript/controllers/ruby_ui", controller_file_name)
+          copy_file file_path, Rails.root.join("app/javascript/controllers/ruby_ui", controller_file_name), force: options["force"]
         end
 
         # Importmap doesn't have controller manifest, instead it uses `eagerLoadControllersFrom("controllers", application)`
@@ -68,7 +69,7 @@ module RubyUI
 
       def install_components_dependencies(components)
         components&.each do |component|
-          run "bin/rails generate ruby_ui:component #{component}"
+          run "bin/rails generate ruby_ui:component #{component} --force #{options["force"]}"
         end
       end
 

data/lib/generators/ruby_ui/install/install_generator.rb

@@ -42,7 +42,7 @@ module RubyUI
 
       def add_ruby_ui_module_to_components_base
         say "Adding RubyUI Kit to Components::Base"
-        insert_into_file Rails.root.join("app/components/base.rb"), after: "include Components" do
+        insert_into_file Rails.root.join("app/components/base.rb"), after: "class Components::Base < Phlex::HTML" do
           "\n  include RubyUI"
         end
       end
@@ -62,12 +62,6 @@ module RubyUI
       def install_tailwind_plugins
         say "Installing tw-animate-css plugin"
         install_js_package("tw-animate-css")
-
-        say "Installing @tailwindcss/forms plugin"
-        install_js_package("@tailwindcss/forms")
-
-        say "Installing @tailwindcss/typography plugin"
-        install_js_package("@tailwindcss/typography")
       end
 
       def add_ruby_ui_base

data/lib/generators/ruby_ui/install/templates/tailwind.css.erb

@@ -1,8 +1,5 @@
 @import "tailwindcss";
 
-@plugin "@tailwindcss/forms";
-@plugin "@tailwindcss/typography";
-
 <% if using_importmap? %>
 @import "../../../vendor/javascript/tw-animate-css.js";
 <% else %>

data/lib/generators/ruby_ui/javascript_utils.rb

@@ -8,6 +8,8 @@ module RubyUI
           run "yarn add #{package}"
         elsif using_npm?
           run "npm install #{package}"
+        elsif using_pnpm?
+          run "pnpm install #{package}"
         else
           say "Could not detect the package manager, you need to install '#{package}' manually", :red
         end
@@ -30,6 +32,8 @@ module RubyUI
 
       def using_npm? = File.exist?(Rails.root.join("package-lock.json"))
 
+      def using_pnpm? = File.exist?(Rails.root.join("pnpm-lock.yaml"))
+
       def using_yarn? = File.exist?(Rails.root.join("yarn.lock"))
 
       def pin_motion

data/lib/ruby_ui/alert_dialog/alert_dialog_content.rb

@@ -14,8 +14,7 @@ module RubyUI
     def background
       div(
         data_state: "open",
-        class:
-              "fixed inset-0 z-50 bg-black/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",
+        class: "fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in",
         style: "pointer-events:auto",
         data_aria_hidden: "true",
         aria_hidden: "true"
@@ -26,7 +25,7 @@ module RubyUI
       div(
         role: "alertdialog",
         data_state: "open",
-        class: "flex flex-col fixed left-[50%] top-[50%] z-50 w-full max-w-lg max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+        class: "flex flex-col fixed left-[50%] top-[50%] z-50 w-full max-w-lg max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:rounded-lg md:w-full",
         style: "pointer-events:auto",
         &
       )

data/lib/ruby_ui/button/button.rb

@@ -2,6 +2,13 @@
 
 module RubyUI
   class Button < Base
+    BASE_CLASSES = [
+      "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors",
+      "disabled:pointer-events-none disabled:opacity-50",
+      "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
+      "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed"
+    ].freeze
+
     def initialize(type: :button, variant: :primary, size: :md, icon: false, **attrs)
       @type = type
       @variant = variant.to_sym
@@ -36,43 +43,55 @@ module RubyUI
 
     def primary_classes
       [
-        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        size_classes
+        BASE_CLASSES,
+        size_classes,
+        "bg-primary text-primary-foreground shadow",
+        "hover:bg-primary/90"
       ]
     end
 
     def link_classes
       [
-        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 text-primary underline-offset-4 hover:underline",
-        size_classes
+        BASE_CLASSES,
+        size_classes,
+        "text-primary underline-offset-4",
+        "hover:underline"
       ]
     end
 
     def secondary_classes
       [
-        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-secondary text-secondary-foreground hover:bg-opacity-80",
-        size_classes
+        BASE_CLASSES,
+        size_classes,
+        "bg-secondary text-secondary-foreground",
+        "hover:bg-opacity-80"
       ]
     end
 
     def destructive_classes
       [
-        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        size_classes
+        BASE_CLASSES,
+        size_classes,
+        "bg-destructive text-white shadow-sm",
+        "[a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20",
+        "dark:focus-visible:ring-destructive/40 dark:bg-destructive/60"
       ]
     end
 
     def outline_classes
       [
-        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        size_classes
+        BASE_CLASSES,
+        size_classes,
+        "border border-input bg-background shadow-sm",
+        "hover:bg-accent hover:text-accent-foreground"
       ]
     end
 
     def ghost_classes
       [
-        "whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground",
-        size_classes
+        BASE_CLASSES,
+        size_classes,
+        "hover:bg-accent hover:text-accent-foreground"
       ]
     end
 
@@ -88,10 +107,7 @@ module RubyUI
     end
 
     def default_attrs
-      {
-        type: @type,
-        class: default_classes
-      }
+      {type: @type, class: default_classes}
     end
   end
 end

data/lib/ruby_ui/checkbox/checkbox.rb

@@ -16,7 +16,13 @@ module RubyUI
           ruby_ui__checkbox_group_target: "checkbox",
           action: "change->ruby-ui--checkbox-group#onChange change->ruby-ui--form-field#onInput invalid->ruby-ui--form-field#onInvalid"
         },
-        class: "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 accent-primary"
+        class: [
+          "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "checked:bg-primary checked:text-primary-foreground",
+          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        ]
       }
     end
   end

data/lib/ruby_ui/combobox/combobox.rb

@@ -2,7 +2,7 @@
 
 module RubyUI
   class Combobox < Base
-    def initialize(term: "items", **)
+    def initialize(term: nil, **)
       @term = term
       super(**)
     end
@@ -18,7 +18,8 @@ module RubyUI
         role: "combobox",
         data: {
           controller: "ruby-ui--combobox",
-          ruby_ui__combobox_term_value: @term.to_s
+          ruby_ui__combobox_term_value: @term,
+          action: "turbo:morph@window->ruby-ui--combobox#updateTriggerContent"
         }
       }
     end

data/lib/ruby_ui/combobox/combobox_checkbox.rb

@@ -12,8 +12,10 @@ module RubyUI
       {
         class: [
           "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-          "disabled:cursor-not-allowed disabled:opacity-50"
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "checked:bg-primary checked:text-primary-foreground",
+          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
         ],
         data: {
           ruby_ui__combobox_target: "input",

data/lib/ruby_ui/combobox/combobox_controller.js

@@ -53,12 +53,12 @@ export default class extends Controller {
   updateTriggerContent() {
     const checkedInputs = this.inputTargets.filter(input => input.checked)
 
-    if (checkedInputs.length == 0) {
+    if (checkedInputs.length === 0) {
       this.triggerContentTarget.innerText = this.triggerTarget.dataset.placeholder
-    } else if (checkedInputs.length === 1) {
-      this.triggerContentTarget.innerText = this.inputContent(checkedInputs[0])
-    } else {
+    } else if (this.termValue && checkedInputs.length > 1) {
       this.triggerContentTarget.innerText = `${checkedInputs.length} ${this.termValue}`
+    } else {
+      this.triggerContentTarget.innerText = checkedInputs.map((input) => this.inputContent(input)).join(", ")
     }
   }
 

data/lib/ruby_ui/combobox/combobox_item.rb

@@ -13,7 +13,8 @@ module RubyUI
         class: [
           "flex flex-row w-full text-wrap [&>span,&>div]:truncate gap-2 items-center rounded-sm px-2 py-1 text-sm outline-none cursor-pointer",
           "select-none has-[:checked]:bg-accent hover:bg-accent p-2",
-          "[&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0 aria-[current=true]:bg-accent aria-[current=true]:ring aria-[current=true]:ring-offset-2"
+          "[&>svg]:pointer-events-none [&>svg]:size-4 [&>svg]:shrink-0 aria-[current=true]:bg-accent aria-[current=true]:ring aria-[current=true]:ring-offset-2",
+          "has-disabled:opacity-50 has-disabled:cursor-not-allowed"
         ],
         role: "option",
         data: {

data/lib/ruby_ui/combobox/combobox_radio.rb

@@ -10,7 +10,14 @@ module RubyUI
 
     def default_attrs
       {
-        class: "aspect-square h-4 w-4 rounded-full border border-primary accent-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        class: [
+          "aspect-square h-4 w-4 rounded-full border border-primary accent-primary text-primary shadow",
+          "focus:outline-none",
+          "focus-visible:ring-1 focus-visible:ring-ring",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "checked:bg-primary checked:text-primary-foreground",
+          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none"
+        ],
         data: {
           ruby_ui__combobox_target: "input",
           ruby_ui__form_field_target: "input",

data/lib/ruby_ui/combobox/combobox_search_input.rb

@@ -19,16 +19,22 @@ module RubyUI
     def default_attrs
       {
         type: "search",
-        class: "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none border-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
         role: "searchbox",
+        autocorrect: "off",
+        autocomplete: "off",
+        spellcheck: "false",
         placeholder: @placeholder,
+        class: [
+          "flex h-9 w-full rounded-md bg-transparent py-3 text-sm outline-none border-none",
+          "focus:ring-0",
+          "placeholder:text-muted-foreground",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none"
+        ],
         data: {
           ruby_ui__combobox_target: "searchInput",
           action: "keyup->ruby-ui--combobox#filterItems search->ruby-ui--combobox#filterItems"
-        },
-        autocomplete: "off",
-        autocorrect: "off",
-        spellcheck: "false"
+        }
       }
     end
 

data/lib/ruby_ui/combobox/combobox_toggle_all_checkbox.rb

@@ -13,7 +13,8 @@ module RubyUI
         class: [
           "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background accent-primary",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-          "disabled:cursor-not-allowed disabled:opacity-50"
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none"
         ],
         data: {
           ruby_ui__combobox_target: "toggleAll",

data/lib/ruby_ui/combobox/combobox_trigger.rb

@@ -21,7 +21,13 @@ module RubyUI
     def default_attrs
       {
         type: "button",
-        class: "flex h-full w-full items-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 justify-between",
+        class: [
+          "flex h-full w-full items-center whitespace-nowrap rounded-md text-sm ring-offset-background transition-colors border border-input bg-background h-9 px-4 py-2 justify-between",
+          "hover:bg-accent hover:text-accent-foreground",
+          "disabled:pointer-events-none disabled:opacity-50",
+          "aria-disabled:pointer-events-none aria-disabled:opacity-50 aria-disabled:cursor-not-allowed",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        ],
         data: {
           placeholder: @placeholder,
           ruby_ui__combobox_target: "trigger",

data/lib/ruby_ui/command/command_controller.js

@@ -34,7 +34,6 @@ export default class extends Controller {
     // allow scroll on body
     document.body.classList.remove("overflow-hidden");
     // remove the element
-    console.log("this.element", this.element);
     this.element.remove();
   }
 

data/lib/ruby_ui/dialog/dialog_content.rb

@@ -34,7 +34,7 @@ module RubyUI
       {
         data_state: "open",
         class: [
-          "fixed flex flex-col pointer-events-auto left-[50%] top-[50%] z-50 w-full max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+          "fixed flex flex-col pointer-events-auto left-[50%] top-[50%] z-50 w-full max-h-screen overflow-y-auto translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:rounded-lg md:w-full",
           SIZES[@size]
         ]
       }
@@ -70,8 +70,7 @@ module RubyUI
       div(
         data_state: "open",
         data_action: "click->ruby-ui--dialog#dismiss esc->ruby-ui--dialog#dismiss",
-        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"
+        class: "fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=open]:fade-in-0"
       )
     end
   end

data/lib/ruby_ui/dialog/dialog_controller.js

@@ -17,7 +17,7 @@ export default class extends Controller {
   }
 
   open(e) {
-    e.preventDefault()
+    e?.preventDefault();
     document.body.insertAdjacentHTML('beforeend', this.contentTarget.innerHTML)
     // prevent scroll on body
     document.body.classList.add('overflow-hidden')

data/lib/ruby_ui/dropdown_menu/dropdown_menu.rb

@@ -15,6 +15,11 @@ module RubyUI
 
     def default_attrs
       {
+        class: [
+          "z-50",
+          "group/dropdown-menu",
+          (strategy == "absolute") ? "is-absolute" : "is-fixed"
+        ],
         data: {
           controller: "ruby-ui--dropdown-menu",
           action: "click@window->ruby-ui--dropdown-menu#onClickOutside",
@@ -22,5 +27,9 @@ module RubyUI
         }
       }
     end
+
+    def strategy
+      @_strategy ||= @options[:strategy] || "absolute"
+    end
   end
 end

data/lib/ruby_ui/dropdown_menu/dropdown_menu_content.rb

@@ -3,7 +3,7 @@
 module RubyUI
   class DropdownMenuContent < Base
     def view_template(&block)
-      div(data: {ruby_ui__dropdown_menu_target: "content"}, class: "hidden", style: "width: max-content; position: absolute; top: 0; left: 0;") do
+      div(**wrapper_attrs) do
         div(**attrs, &block)
       end
     end
@@ -15,7 +15,22 @@ module RubyUI
         data: {
           state: :open
         },
-        class: "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-background p-1 text-foreground shadow-md 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 w-56"
+        class: "z-50 min-w-[8rem] rounded-md border bg-background p-1 text-foreground shadow-md 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 w-56"
+      }
+    end
+
+    def wrapper_attrs
+      {
+        class: [
+          "z-50 hidden group-[.is-absolute]/dropdown-menu:absolute",
+          "group-[.is-fixed]/dropdown-menu:fixed"
+        ],
+        data: {ruby_ui__dropdown_menu_target: "content"},
+        style: {
+          width: "max-content",
+          top: "0",
+          left: "0"
+        }
       }
     end
   end

data/lib/ruby_ui/dropdown_menu/dropdown_menu_controller.js

@@ -1,5 +1,11 @@
 import { Controller } from "@hotwired/stimulus";
-import { computePosition, flip, shift, offset } from "@floating-ui/dom";
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  autoUpdate,
+} from "@floating-ui/dom";
 
 export default class extends Controller {
   static targets = ["trigger", "content", "menuItem"];
@@ -12,17 +18,34 @@ export default class extends Controller {
       type: Object,
       default: {},
     },
-  }
+  };
 
   connect() {
     this.boundHandleKeydown = this.#handleKeydown.bind(this); // Bind the function so we can remove it later
     this.selectedIndex = -1;
+
+    this.#setupAutoUpdate();
+  }
+
+  disconnect() {
+    if (this.autoUpdateCleanup) {
+      this.autoUpdateCleanup();
+    }
+  }
+
+  #setupAutoUpdate() {
+    this.autoUpdateCleanup = autoUpdate(
+      this.triggerTarget,
+      this.contentTarget,
+      this.#computeTooltip.bind(this),
+    );
   }
 
   #computeTooltip() {
     computePosition(this.triggerTarget, this.contentTarget, {
       placement: this.optionsValue.placement || "top",
       middleware: [flip(), shift(), offset(8)],
+      strategy: this.optionsValue.strategy || "absolute",
     }).then(({ x, y }) => {
       Object.assign(this.contentTarget.style, {
         left: `${x}px`,
@@ -40,14 +63,16 @@ export default class extends Controller {
   }
 
   toggle() {
-    this.contentTarget.classList.contains("hidden") ? this.#open() : this.close();
+    this.contentTarget.classList.contains("hidden")
+      ? this.#open()
+      : this.close();
   }
 
   #open() {
     this.openValue = true;
     this.#deselectAll();
     this.#addEventListeners();
-    this.#computeTooltip()
+    this.#computeTooltip();
     this.contentTarget.classList.remove("hidden");
   }
 
@@ -59,15 +84,17 @@ export default class extends Controller {
 
   #handleKeydown(e) {
     // return if no menu items (one line fix for)
-    if (this.menuItemTargets.length === 0) { 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();
     }
@@ -76,7 +103,7 @@ export default class extends Controller {
   #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;
       }
     });
@@ -99,22 +126,24 @@ 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);
+    document.addEventListener("keydown", this.boundHandleKeydown);
   }
 
   #removeEventListeners() {
-    document.removeEventListener('keydown', this.boundHandleKeydown);
+    document.removeEventListener("keydown", this.boundHandleKeydown);
   }
 }

data/lib/ruby_ui/form/form_field_label.rb

@@ -9,7 +9,13 @@ module RubyUI
     private
 
     def default_attrs
-      {class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"}
+      {
+        class: [
+          "text-sm font-medium leading-none",
+          "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+          "peer-aria-disabled:cursor-not-allowed peer-aria-disabled:opacity-70 peer-aria-disabled:pointer-events-none"
+        ]
+      }
     end
   end
 end