ruby_ui 1.0.0.beta1 → 1.0.0.rc1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 518fa1b05606796f9ae57a444aa55f5a5f0fcad5280c1e0ed75fa4778dbe978f
-  data.tar.gz: 58c2a5717af15d0326258044a7ffc862d06cb3f3c3cc47f54a269b465bca2bcf
+  metadata.gz: bef04b912f756edd217e2294608bc08eef650d0e944145ef052b5a1760860682
+  data.tar.gz: '0792ce039b5817ce7fd9b6965c20672497ba6615ab555b2965110ce6a6817ed2'
 SHA512:
-  metadata.gz: c17770afaf73e476ba5d2a52bd60d4f4ab00c80e84f7390e9870099cd85a827f81992a6a8d1dd2fd246b34785b6fb2640a95d5f7ad5b08b697a710eb29c89db5
-  data.tar.gz: d70e491efc576db70d0fa7ea559ce16472a7fdd4f2a7a3a770ec15bc62b25da2ec12d12932baed3a966b9d44f2f0cb8704235f3bb016397b5e483cfe30cb1645
+  metadata.gz: 7c515453889a668ab223f6099407cd32c70046bd91e8e1e814ee3759e865857b83d0de87fda35b67a157da6a045794f067b1871574eff82b3d313180a62c5aff
+  data.tar.gz: 2cb5b4988c27072c593bf6fa88b3f40785cb8ba19c6c9627082b56260e4793978757ddac1683216e74e1a91c0052ac2474cead61ecef67c8b4249f67988b7f9b

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 RubyUI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,85 @@
+# RubyUI (former PhlexUI) 🚀
+
+Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.
+
+This is NOT a component library. It's a collection of re-usable components that you can generate or copy and paste into your apps.
+
+Pick the components you need. Copy and paste the code into your project and customize to your needs. The code is yours.
+
+Use this as a reference to build your own component libraries.
+
+### Key Features:
+
+- **Built for Speed** ⚡: RubyUI leverages Phlex, which is up to 12x faster than traditional Rails ERB templates.
+- **Stunning UI** 🎨: Design beautiful, streamlined, and customizable UIs that sell your app effortlessly.
+- **Stay Organized** 📁: Keep your UI components well-organized and easy to manage.
+- **Customer-Centric UX** 🧑‍💼: Create memorable app experiences for your users.
+- **Completely Customizable** 🔧: Full control over the design of all components.
+- **Minimal Dependencies** 🍃: Uses custom-built Stimulus.js controllers to keep your app lean.
+- **Reuse with Ease** ♻️: Build components once and use them seamlessly across your project.
+
+### How to Use:
+
+1. **Find the perfect component** 🔍: Browse live-embedded components on our documentation page.
+2. **Copy the snippet** 📋: Easily copy code snippets for quick implementation.
+3. **Make it yours** 🎨: Customize components using Tailwind utility classes to fit your specific needs.
+
+## Installation 🚀
+
+### 1. Install the gem
+
+```bash
+bundle add ruby_ui --group development --require false
+```
+
+or add it to your Gemfile:
+
+```ruby
+gem "ruby_ui", group: :development, require: false
+```
+
+### 2. Run the installer:
+
+```bash
+bin/rails g ruby_ui:install
+```
+
+### 3. Done! 🎉
+
+You can generate your components using `ruby_ui:component` generator.
+
+```bash
+bin/rails g ruby_ui:component Accordion
+```
+
+## Documentation 📖
+
+Visit https://rubyui.com/docs/introduction to view the full documentation, including:
+
+- Detailed component guides
+- Themes
+- Lookbook
+- Getting started guide
+
+## Speed Comparison 🏎️
+
+RubyUI, powered by Phlex, outperforms alternative methods:
+
+- Phlex: Baseline 🏁
+- ViewComponent: ~1.5x slower 🚙
+- ERB Templates: ~5x slower 🐢
+
+See the original [view layers benchmark](https://github.com/KonnorRogers/view-layer-benchmarks) by @KonnorRogers and its [variations](https://github.com/KonnorRogers/view-layer-benchmarks/forks).
+
+## Importmap notes:
+
+If you run into importmap issues this stackoverflow question might help:
+https://stackoverflow.com/questions/70548841/how-to-add-custom-js-file-to-new-rails-7-project/72855705
+
+## License 📜
+
+Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).
+
+---
+
+© 2024 RubyUI. All rights reserved. 🔒

data/lib/generators/ruby_ui/component_generator.rb

@@ -15,26 +15,13 @@ module RubyUI
           exit
         end
 
-        say "Generating component files"
-      end
-
-      def copy_main_component_file
-        main_component_file_path = File.join(component_folder_path, "#{component_folder_name}.rb")
-
-        # some components dont't have a main component, eg. Typography
-        return unless File.exist? main_component_file_path
-
-        say "Generating main component"
-
-        copy_file main_component_file_path, Rails.root.join("app/components/ruby_ui", "#{component_folder_name}.rb")
+        say "Generating #{component_name} files..."
       end
 
       def copy_related_component_files
-        return if related_components_file_paths.empty?
-
-        say "Generating related components"
+        say "Generating components"
 
-        related_components_file_paths.each do |file_path|
+        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)
         end
@@ -75,9 +62,7 @@ module RubyUI
 
       def component_folder_path = File.join(self.class.source_root, component_folder_name)
 
-      def main_component_file_path = File.join(component_folder_path, "#{component_folder_name}.rb")
-
-      def related_components_file_paths = Dir.glob(File.join(component_folder_path, "*.rb")) - [main_component_file_path]
+      def components_file_paths = Dir.glob(File.join(component_folder_path, "*.rb"))
 
       def js_controller_file_paths = Dir.glob(File.join(component_folder_path, "*.js"))
 
@@ -99,27 +84,6 @@ module RubyUI
         end
       end
 
-      def pin_motion
-        say <<~TEXT
-          WARNING: Installing motion from CDN because `bin/importmap pin motion` doesn't download the correct file.
-        TEXT
-
-        inject_into_file Rails.root.join("config/importmap.rb"), <<~RUBY
-          pin "motion", to: "https://cdn.jsdelivr.net/npm/motion@11.11.17/+esm"\n
-        RUBY
-      end
-
-      def pin_tippy_js
-        say <<~TEXT
-          WARNING: Installing tippy.js from CDN because `bin/importmap pin tippy.js` doesn't download the correct file.
-        TEXT
-
-        inject_into_file Rails.root.join("config/importmap.rb"), <<~RUBY
-          pin "tippy.js", to: "https://cdn.jsdelivr.net/npm/tippy.js@6.3.7/+esm"
-          pin "@popperjs/core", to: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/+esm"\n
-        RUBY
-      end
-
       def dependencies
         @dependencies ||= YAML.load_file(File.join(__dir__, "dependencies.yml")).freeze
 

data/lib/generators/ruby_ui/dependencies.yml

@@ -0,0 +1,74 @@
+accordion:
+  js_packages:
+    - "motion"
+
+alert_dialog:
+  components:
+    - "Button"
+
+calendar:
+  js_packages:
+    - "mustache"
+
+carousel:
+  js_packages:
+    - "embla-carousel"
+
+chart:
+  js_packages:
+    - "chart.js"
+
+clipboard:
+  js_packages:
+    - "@floating-ui/dom"
+
+codeblock:
+  components:
+    - "Button"
+    - "Clipboard"
+
+  gems:
+    - "rouge"
+
+combobox:
+  js_packages:
+    - "@floating-ui/dom"
+
+command:
+  js_packages:
+    - "fuse.js"
+
+context_menu:
+  js_packages:
+    - "tippy.js"
+
+dropdown_menu:
+  js_packages:
+    - "@floating-ui/dom"
+
+hover_card:
+  js_packages:
+    - "tippy.js"
+
+masked_input:
+  components:
+    - "Input"
+
+  js_packages:
+    - "maska"
+
+pagination:
+  components:
+    - "Button"
+
+popover:
+  js_packages:
+    - "@floating-ui/dom"
+
+select:
+  js_packages:
+    - "@floating-ui/dom"
+
+tooltip:
+  js_packages:
+    - "@floating-ui/dom"

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

@@ -14,17 +14,12 @@ module RubyUI
         say "Checking for phlex-rails"
 
         if gem_installed?("phlex-rails")
-          if Gem::Specification.find_by_name("phlex-rails").version < "2.0.0.beta2"
-            say "You need to upgrade to phlex-rails 2 to use RubyUI", :red
-            exit
-          else
-            say "phlex-rails is already installed", :green
-          end
+          say "phlex-rails is already installed", :green
         else
           say "Adding phlex-rails to Gemfile"
-          run %(bundle add phlex-rails --github="phlex-ruby/phlex-rails")
+          run %(bundle add phlex-rails)
 
-          say "Running phlex-rails structure"
+          say "Generating phlex-rails structure"
           run "bin/rails generate phlex:install"
         end
       end
@@ -53,26 +48,26 @@ module RubyUI
       end
 
       def add_tailwind_css
-        say "Adding RubyUI styles to application css"
-        template "application.tailwind.css.erb", Rails.root.join("app/assets/stylesheets/application.tailwind.css")
-      end
-
-      def add_tailwind_config
-        say "Adding RubyUI config to tailwind config"
+        say "Adding Tailwind css"
 
-        if File.exist?(Rails.root.join("tailwind.config.js")) # tailwindcss js package
-          template "tailwind.config.js.js-package.erb", Rails.root.join("tailwind.config.js")
-        elsif File.exist?(Rails.root.join("config/tailwind.config.js")) # tailwindcss-rails gem
-          template "tailwind.config.js.tailwindcss-rails.erb", Rails.root.join("config/tailwind.config.js")
+        css_path = if using_importmap?
+          Rails.root.join("app/assets/tailwind/application.css")
         else
-          say "Cannot find tailwind.config.js. You will need to install tailwind config manually", :red
+          Rails.root.join("app/assets/stylesheets/application.tailwind.css")
         end
+
+        template "tailwind.css.erb", css_path
       end
 
-      def install_tailwind_animate
-        say "Installing tailwindcss-animate plugin"
+      def install_tailwind_plugins
+        say "Installing tw-animate-css plugin"
+        install_js_package("tw-animate-css")
 
-        install_js_package("tailwindcss-animate")
+        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
@@ -85,6 +80,10 @@ module RubyUI
       def gem_installed?(name)
         Gem::Specification.find_all_by_name(name).any?
       end
+
+      def using_tailwindcss_rails_gem?
+        File.exist?(Rails.root.join("app/assets/tailwind/application.css"))
+      end
     end
   end
 end

data/lib/generators/ruby_ui/install/templates/ruby_ui.rb.erb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module RubyUI
+  extend Phlex::Kit
+end
+
+# Allow using RubyUI instead RubyUi
+Rails.autoloaders.main.inflector.inflect(
+  "ruby_ui" => "RubyUI"
+)
+
+# Allow using RubyUI::ComponentName instead Components::RubyUI::ComponentName
+Rails.autoloaders.main.push_dir(
+  "#{Rails.root}/app/components/ruby_ui", namespace: RubyUI
+)
+
+# Allow using RubyUI::ComponentName instead RubyUI::ComponentName::ComponentName
+Rails.autoloaders.main.collapse(Rails.root.join("app/components/ruby_ui/*"))

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

@@ -0,0 +1,156 @@
+@import "tailwindcss";
+
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/typography";
+
+<% if using_importmap? %>
+@import "../../../vendor/javascript/tw-animate-css.js";
+<% else %>
+@import "tw-animate-css";
+<% end %>
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  /* ruby_ui specific */
+  --warning: hsl(38 92% 50%);
+  --warning-foreground: hsl(0 0% 100%);
+  --success: hsl(87 100% 37%);
+  --success-foreground: hsl(0 0% 100%);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.145 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.145 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.269 0 0);
+  --input: oklch(0.269 0 0);
+  --ring: oklch(0.439 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.269 0 0);
+  --sidebar-ring: oklch(0.439 0 0);
+
+  /* ruby_ui specific */
+  --warning: hsl(38 92% 50%);
+  --warning-foreground: hsl(0 0% 100%);
+  --success: hsl(84 81% 44%);
+  --success-foreground: hsl(0 0% 100%);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* ruby_ui specific */
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+}
+
+/* Container settings */
+@utility container {
+  margin-inline: auto;
+  padding-inline: 2rem;
+  max-width: 1400px;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

data/lib/generators/ruby_ui/javascript_utils.rb

@@ -31,6 +31,27 @@ module RubyUI
       def using_npm? = File.exist?(Rails.root.join("package-lock.json"))
 
       def using_yarn? = File.exist?(Rails.root.join("yarn.lock"))
+
+      def pin_motion
+        say <<~TEXT
+          WARNING: Installing motion from CDN because `bin/importmap pin motion` doesn't download the correct file.
+        TEXT
+
+        inject_into_file Rails.root.join("config/importmap.rb"), <<~RUBY
+          pin "motion", to: "https://cdn.jsdelivr.net/npm/motion@11.11.17/+esm"\n
+        RUBY
+      end
+
+      def pin_tippy_js
+        say <<~TEXT
+          WARNING: Installing tippy.js from CDN because `bin/importmap pin tippy.js` doesn't download the correct file.
+        TEXT
+
+        inject_into_file Rails.root.join("config/importmap.rb"), <<~RUBY
+          pin "tippy.js", to: "https://cdn.jsdelivr.net/npm/tippy.js@6.3.7/+esm"
+          pin "@popperjs/core", to: "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/+esm"\n
+        RUBY
+      end
     end
   end
 end

data/lib/ruby_ui/accordion/accordion_controller.js

@@ -0,0 +1,97 @@
+import { Controller } from "@hotwired/stimulus";
+import { animate } from "motion";
+
+// Connects to data-controller="ruby-ui--accordion"
+export default class extends Controller {
+  static targets = ["icon", "content"];
+  static values = {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+    animationDuration: {
+      type: Number,
+      default: 0.15, // Default animation duration (in seconds)
+    },
+    animationEasing: {
+      type: String,
+      default: "ease-in-out", // Default animation easing
+    },
+    rotateIcon: {
+      type: Number,
+      default: 180, // Default icon rotation (in degrees)
+    },
+  };
+
+  connect() {
+    // Set the initial state of the accordion
+    let originalAnimationDuration = this.animationDurationValue;
+    this.animationDurationValue = 0;
+    this.openValue ? this.open() : this.close();
+    this.animationDurationValue = originalAnimationDuration;
+  }
+
+  // Toggle the 'open' value
+  toggle() {
+    this.openValue = !this.openValue;
+  }
+
+  // Handle changes in the 'open' value
+  openValueChanged(isOpen, wasOpen) {
+    if (isOpen) {
+      this.open();
+    } else {
+      this.close();
+    }
+  }
+
+  // Open the accordion content
+  open() {
+    if (this.hasContentTarget) {
+      this.revealContent();
+      this.hasIconTarget && this.rotateIcon();
+      this.openValue = true;
+    }
+  }
+
+  // Close the accordion content
+  close() {
+    if (this.hasContentTarget) {
+      this.hideContent();
+      this.hasIconTarget && this.rotateIcon();
+      this.openValue = false;
+    }
+  }
+
+  // Reveal the accordion content with animation
+  revealContent() {
+    const contentHeight = this.contentTarget.scrollHeight;
+    animate(
+      this.contentTarget,
+      { height: `${contentHeight}px` },
+      {
+        duration: this.animationDurationValue,
+        easing: this.animationEasingValue,
+      },
+    );
+  }
+
+  // Hide the accordion content with animation
+  hideContent() {
+    animate(
+      this.contentTarget,
+      { height: 0 },
+      {
+        duration: this.animationDurationValue,
+        easing: this.animationEasingValue,
+      },
+    );
+  }
+
+  // Rotate the accordion icon 180deg using animate function
+  rotateIcon() {
+    animate(this.iconTarget, {
+      rotate: `${this.openValue ? this.rotateIconValue : 0}deg`,
+    });
+  }
+}

data/lib/ruby_ui/alert/alert.rb

@@ -27,7 +27,7 @@ module RubyUI
     end
 
     def default_attrs
-      base_classes = "backdrop-blur relative w-full ring-1 ring-inset rounded-lg px-4 py-4 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-8"
+      base_classes = "backdrop-blur relative w-full ring-1 ring-inset rounded-lg px-4 py-4 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:start-4 [&>svg]:top-4 [&>svg~*]:ps-8"
       {
         class: [base_classes, colors]
       }

data/lib/ruby_ui/alert_dialog/alert_dialog_content.rb

@@ -26,7 +26,7 @@ module RubyUI
       div(
         role: "alertdialog",
         data_state: "open",
-        class: "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg 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=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",
         style: "pointer-events:auto",
         &
       )

data/lib/ruby_ui/alert_dialog/alert_dialog_controller.js

@@ -0,0 +1,31 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="ruby-ui--alert-dialog"
+export default class extends Controller {
+  static targets = ["content"];
+  static values = {
+    open: {
+      type: Boolean,
+      default: false,
+    },
+  };
+
+  connect() {
+    if (this.openValue) {
+      this.open();
+    }
+  }
+
+  open() {
+    document.body.insertAdjacentHTML("beforeend", this.contentTarget.innerHTML);
+    // prevent scroll on body
+    document.body.classList.add("overflow-hidden");
+  }
+
+  dismiss(e) {
+    // allow scroll on body
+    document.body.classList.remove("overflow-hidden");
+    // remove the element
+    this.element.remove();
+  }
+}