shadcn-ui 0.0.3 → 0.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 22a141b91988a0b7411fa66841274699ee3f55d4a6b7b2afb152000cdba95385
-  data.tar.gz: f7a806d1a7897c1154b4b6a23903d1a2295e4152e29638ff6e5721982eea4760
+  metadata.gz: cc5e15a7e38cfc62b7c6baeabfd28b0d1b1869d9c1af906cee95a6c1d6dafb0e
+  data.tar.gz: 4ace082612e01960d714dc068e734a67d57cac288f77bb13eed827d22591e87e
 SHA512:
-  metadata.gz: 1b2264728f5100c07607e963c4027aa406e91c7635ef9b9cf6e1c21f5dd7fa193575e0a11b08a2021358835de6645665f6370b4119a1169c99b6ece40c195f9d
-  data.tar.gz: 357afd147401ff2c9911082690ed8b8f8162bbf60d64a229ee1c51bfbfd7c6cbfcfa88c8ace873dc1c64029c3ef5fefe64d4e0767029eec579eeb4208defb985
+  metadata.gz: f604552bb826fd72f8974ce1a5fec84c93ece1957df5b8831287abb7f2ffb5520068a713bd6f8fd9d9b4804ab6cce50648adc32778282472f991a328f2da6b0b
+  data.tar.gz: 5bc64754ad18e8d2d70641934bfc8db0bea5855b3921b43a9626214122da0dfb12b9e925c904ae3525bbf7f7c44c50b696701b90f6c2bf3db239e0ae051c9232

data/Procfile.dev

@@ -1,2 +1 @@
-web: bin/rails server -p 3000
 css: bin/rails tailwindcss:watch

data/README.md

@@ -2,8 +2,11 @@
 
 [![Gem Version](https://badge.fury.io/rb/shadcn-ui.svg)](https://badge.fury.io/rb/shadcn-ui)
 
-Accessible and customizable components that you can copy and paste into your apps. Free. Open
-Source. **Use this to build your own component library**.
+[Shadcn on Rails](https://shadcn.rails-components.com) provides customizable components that you can
+copy and paste into your apps. Free. Open Source. **Use this to build your own component library**.
+
+**If you're using this, [please let me know](https://twitter.com/aviflombaum) so I keep developing
+it.**
 
 ## About
 
@@ -21,321 +24,17 @@ Use this as a reference to build your own component libraries.
 
 ![hero](public/og.jpg)
 
-## Alpha Usage/Installation
-
-Prior to the initial gem release, you can use this as an alpha by cloning this repository and
-starting up the app as you would a standard rails app.
-
-```
-git clone https://github.com/aviflombaum/shadcn-rails.git
-cd shadcn-rails
-bundle install
-./bin/dev
-```
-
-There are very few dependencies and no database so it should just boot up. Visit
-http://localhost:3000 to see the demo app which is also the documentation. You'll be able to browse
-the components at http://localhost:3000/components.
-
-If there's a component you want to try in your app, you will be copying the code from this app to
-yours. There's a few other steps you'll need.
-
-## Installing a Component
-
-### Add Tailwind CSS
-
-Components are styled using Tailwind CSS. You need to install Tailwind CSS in your project.
-
-[Follow the Tailwind CSS installation instructions to get started.](https://tailwindcss.com/docs/installation)
-
-### Add dependencies
-
-If you haven't already, install Tailwind into your rails application by adding `tailwindcss-rails`
-to your `Gemfile` and install tailwind into your app:
-
-```sh
-./bin/bundle add tailwindcss-rails
-./bin/rails tailwindcss:install
-```
-
-Then install ./bin/rails tailwindcss:install
-
-### Configure tailwind.config.js
-
-Here's what my `tailwind.config.js` file looks like:
-
-```js title="tailwind.config.js"
-const defaultTheme = require("tailwindcss/defaultTheme");
-
-module.exports = {
-  darkMode: ["class"],
-  content: [
-    "./public/*.html",
-    "./app/helpers/**/*.rb",
-    "./app/javascript/**/*.js",
-    "./app/views/**/*.{erb,haml,html,slim}",
-  ],
-  theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      colors: {
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-      },
-      borderRadius: {
-        lg: `var(--radius)`,
-        md: `calc(var(--radius) - 2px)`,
-        sm: "calc(var(--radius) - 4px)",
-      },
-      fontFamily: {
-        sans: ["var(--font-sans)", ...defaultTheme.fontFamily.sans],
-      },
-      keyframes: {
-        "accordion-down": {
-          from: { height: 0 },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: 0 },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
-    },
-  },
-  plugins: [
-    require("@tailwindcss/forms"),
-    require("@tailwindcss/aspect-ratio"),
-    require("@tailwindcss/typography"),
-    require("@tailwindcss/container-queries"),
-    require("tailwindcss-animate"),
-  ],
-};
-```
-
-### Configure styles
-
-Add the following to your app/assets/stylesheets/application.tailwind.css file.
-
-```css title="application.tailwind.css"
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 47.4% 11.2%;
-
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
-
-    --popover: 0 0% 100%;
-    --popover-foreground: 222.2 47.4% 11.2%;
-
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-
-    --card: 0 0% 100%;
-    --card-foreground: 222.2 47.4% 11.2%;
-
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
-
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
-
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
-
-    --destructive: 0 100% 50%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 215 20.2% 65.1%;
-
-    --radius: 0.5rem;
-  }
-
-  .dark {
-    --background: 224 71% 4%;
-    --foreground: 213 31% 91%;
-
-    --muted: 223 47% 11%;
-    --muted-foreground: 215.4 16.3% 56.9%;
-
-    --accent: 216 34% 17%;
-    --accent-foreground: 210 40% 98%;
-
-    --popover: 224 71% 4%;
-    --popover-foreground: 215 20.2% 65.1%;
-
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
-
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
-
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
-
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
-
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
-
-    --ring: 216 34% 17%;
-
-    --radius: 0.5rem;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-    font-feature-settings:
-      "rlig" 1,
-      "calt" 1;
-  }
-}
-```
-
-### Copy a a component's files to your application
-
-For example, if you want to use the Accordion component, you would copy the following files to your
-application:
-
-- `app/javascript/controllers/components/ui/accordion_controller.js` The Stimulus controller for any
-  component that requires javascript.
-- `app/helpers/components/accordion_helper.rb` The helper for the component that allows for easy
-  rendering within views.
-- `app/views/components/ui/_accordion.html.erb` The html for the component.
-
-Once those are copied in your application you can render an accordion with:
-
-```erb
-<%= render_accordion title: "Did you know?", description: "You can wrap shadcn helpers in any
-  component library you want!" %>
-<%= render_accordion title: "Use the generators.", description: "Add components with #{code("rails g shadcn_ui add accordion")}".html_safe %>
-```
-
-See the component's demo page in `app/views/examples/components/accordion.html.erb` for more
-examples.
-
-This will be similar for each component.
-
-## Documentation
-
-Visit https://avi.nyc/shadcn-on-rails to view the documentation.
-
-## Contributing
-
-I am desperately seeking contributors to this project as it is in the very early stages.
-
-### Contributing with Issues
-
-I am looking for people to start documenting issues in the project. The issues I'm interested in
-are:
-
-1. What components are missing? Just start listing out the components that have yet to be
-   implemented, better yet, open a PR with a branch for that issue and we can all start adding to
-   it.
-2. What components are not accessible? I am not an accessibility expert, so I need help with this.
-   If you see something that is not accessible, please open an issue and let me know. This might
-   mean the aria labels are hardcoded and not customizable or that the labels are simply missing.
-3. What components are not customizable? I am trying to make all components as customizable as
-   possible. If you see something that is not customizable, please open an issue and let me know.
-   All the attributes of a component, like aria labels or classes or id or name, etc, should be
-   customizeable by passing attributes into their helper functions that are passed down to the
-   component's partial to be rendered.
-4. Suggestions for the API of the components. I am trying to make the API as simple as possible. If
-   you have any suggestions for how to make the API simpler, please open an issue and let me know. I
-   am open to any and all suggestions.
-
-These are 3 main areas that would make the project easier for people to contribute to. They all make
-for great opportunities for someone new to open source to both file the issue and even begin to
-slowly implement them.
-
-### Setup
-
-1. Fork and clone the repo.
-2. Run `bundle install` to install dependencies, there aren't many as this is currently a standard
-   Rails applications.
-3. `/bin/dev` to start the application.
-
-### App Structure
-
-For now this is a standard Rails 7 application using propshaft and **importmaps**. This will soon be
-extracted into a gem that provides the components to be installed (copied) into the including
-application.
-
-### Components
-
-The goal of this project is to provide a set of components that can be copied into your application.
-The components are built using [TailwindCSS](https://tailwindcss.com/) and
-[Stimulus](https://stimulus.hotwire.dev/). Each component follows the same structure:
+## Installation
 
-1. There is a component partial located in `app/views/components/ui` that is rendered by the
-   component helper. Ex `app/views/components/ui/_button.html.erb` provides the markup for the
-   button component.
-2. There is a component helper named after the component that is responsible for rendering the
-   component and taking in arguments to customize the component located in `app/helpers/components`.
-   Ex `app/helpers/components/button.rb` provides the `render_button` helper that accepts arguments
-   such as `variant` which describes the kind of button and passes the classes for that `variant` to
-   the partial.
-3. When needed there is a stimulus controller for the component that provides the javascript
-   required to make the component interactive. Ex. `app/javascript/controllers/toast_controller.js`
-   provides the javascript for the toast component to display it and then hide it after a certain
-   amount of time.
+Refer to
+[Installation](https://github.com/aviflombaum/shadcn-rails/blob/main/app/views/documentation/installation.html.md)
+or the [Installation](https://shadcn.rails-components.com/docs/installation) page on the demo site.
 
-This demo application also included examples of how to use the components in
-`app/views/examples/components`. This is used to create the documentation site that this application
-provides with examples of teh components rendered.
+## Development
 
-For now, this convention should be followed when developing new components.
+Clone the repo and run `bin/setup` to install dependencies. Then, run `bin/dev` to start the
+tailwind watcher and then run `rails s`. I have to run the server and tailwind separately to keep
+debuggers working.
 
 ## [shadcn-ui](https://ui.shadcn.com)
 

data/app/assets/stylesheets/shadcn.css

@@ -214,3 +214,11 @@ input[type="range"]::-ms-track {
   overflow: hidden;
   transition: all 0.2s;
 }
+
+input.error {
+  @apply border-red-400;
+}
+
+label.error {
+  @apply text-destructive;
+}

data/app/controllers/components_controller.rb

@@ -2,6 +2,7 @@ class ComponentsController < ActionController::Base
   layout "component"
 
   def show
+    @user = User.new # REFACTOR: For the forms example
     render "examples/components/#{params[:component]}"
   end
 end

data/app/controllers/documentation_controller.rb

@@ -4,7 +4,6 @@ class DocumentationController < ActionController::Base
   end
 
   def show
-    binding.pry
     render "documentation/#{params[:id]}"
   end
 end

data/app/controllers/users_controller.rb

@@ -0,0 +1,19 @@
+class UsersController < ApplicationController
+  layout "component"
+
+  def create
+    params[:component] = "forms"
+    @user = User.new(user_params)
+    if @user.valid?
+      # Toast message
+    else
+      render "examples/components/forms", status: 422
+    end
+  end
+
+  private
+
+  def user_params
+    params.require(:user).permit(:email, :password)
+  end
+end

data/app/form_builders/shadcn_form_builder.rb

@@ -0,0 +1,43 @@
+class ShadcnFormBuilder < ActionView::Helpers::FormBuilder
+  def label(method, options = {})
+    error_class = @object.errors[method].any? ? "error" : ""
+    options[:class] = @template.tw("#{options[:class]} #{error_class}")
+    @template.render_label(name: "#{object_name}[#{method}]", label: method.capitalize, **options)
+  end
+
+  def text_field(method, options = {})
+    options[:class] << " error" if @object.errors[method].any?
+    @template.render_input(
+      name: "#{object_name}[#{method}]",
+      id: "#{object_name}_#{method}",
+      value: @object.send(method),
+      type: "text", **options
+    )
+  end
+
+  def password_field(method, options = {})
+    error_class = @object.errors[method].any? ? "error" : ""
+    options[:class] = @template.tw("#{options[:class]} #{error_class}")
+    @template.render_input(
+      name: "#{object_name}[#{method}]",
+      id: "#{object_name}_#{method}",
+      value: @object.send(method),
+      type: "password", **options
+    )
+  end
+
+  def email_field(method, options = {})
+    error_class = @object.errors[method].any? ? "error" : ""
+    options[:class] = @template.tw("#{options[:class]} #{error_class}")
+    @template.render_input(
+      name: "#{object_name}[#{method}]",
+      id: "#{object_name}_#{method}",
+      value: @object.send(method),
+      type: "email", **options
+    )
+  end
+
+  def submit(value = nil, options = {})
+    @template.render_button(value, **options)
+  end
+end

data/app/helpers/components/alert_dialog_helper.rb

@@ -1,6 +1,22 @@
 module Components::AlertDialogHelper
-  def render_alert_dialog(trigger:, label:, description:, continue:, **options)
-    cancel = options[:cancel] || render_button("Cancel", class: "mt-2 sm:mt-0", data: {action: "ui--dialog#close"})
-    render "components/ui/alert_dialog", trigger:, label:, description:, continue:, cancel:, **options
+  def render_alert_dialog(**options, &block)
+    content = capture(&block) if block
+    render "components/ui/alert_dialog", content: content, **options
+  end
+
+  def alert_dialog_trigger(&block)
+    content_for :alert_dialog_trigger, capture(&block), flush: true
+  end
+
+  def alert_dialog_content(&block)
+    content_for :alert_dialog_content, capture(&block), flush: true
+  end
+
+  def alert_dialog_continue(&block)
+    content_for :alert_dialog_continue, capture(&block), flush: true
+  end
+
+  def alert_dialog_cancel(&block)
+    content_for :alert_dialog_cancel, capture(&block), flush: true
   end
 end

data/app/helpers/components/forms_helper.rb

@@ -0,0 +1,13 @@
+module Components::FormsHelper
+  def render_form_with(**opts)
+    form_with(**opts.merge(builder: ShadcnFormBuilder)) do |form|
+      yield form
+    end
+  end
+
+  def render_form_for(obj, **opts)
+    form_for(obj, **opts.merge(builder: ShadcnFormBuilder), html: opts) do |form|
+      yield form
+    end
+  end
+end

data/app/helpers/components/input_helper.rb

@@ -1,14 +1,24 @@
 module Components::InputHelper
   def render_input(name:, label: false, id: nil, type: :text, value: nil, **options)
-    options[:class] = "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 #{options[:class]} "
-    options[:class] << case options[:style]
+    options[:class] = "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm transition-colors ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 #{options[:class]} "
+    options[:class] << case options[:variant]
     when :borderless
       " border-0 focus-visible:outline-none focus-visible:shadow-none focus-visible:ring-transparent"
     else
-      " focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:border-muted"
+      "shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:border-muted"
     end
-    options.reverse_merge!(required: false, disabled: false,
-      readonly: false, label: false, placeholder: "Type here...")
+    options[:class] = tw(options[:class])
+
+    options.reverse_merge!(
+      label: (options[:lable] || false),
+      required: (options[:required] || false),
+      disabled: (options[:disabled] || false),
+      readonly: (options[:readonly] || false),
+      placeholder: (options[:placeholder] || ""),
+      autocomplete: (options[:autocomplete] || ""),
+      autocapitalize: (options[:autocapitalize] || nil),
+      autocorrect: (options[:autocorrect] || nil)
+    )
     render partial: "components/ui/input", locals: {
       type:,
       label:,

data/app/helpers/components/slider_helper.rb

@@ -1,5 +1,5 @@
 module Components::SliderHelper
-  def render_slider(value:, id:, name:, **options)
+  def render_slider(name:, value: 0, id: nil, **options)
     render "components/ui/slider", value:, id:, name:, **options
   end
 end

data/app/helpers/components/toast_helper.rb

@@ -1,5 +1,8 @@
 module Components::ToastHelper
-  def render_toast(header: nil, description: nil, action: nil, class: nil, data: nil, **options, &block)
+  def render_toast(header: nil, description: nil, action: nil, class: nil, data: {}, variant: :default, **options, &block)
+    options[:class] ||= ""
+    options[:class] << " destructive group border-destructive bg-destructive text-destructive-foreground " if variant == :destructive
+
     render "components/ui/toast", header:, description:, action:, class:, data:, options: options
   end
 end

data/app/helpers/components_helper.rb

@@ -1,4 +1,8 @@
 module ComponentsHelper
+  def tw(classes)
+    TailwindMerge::Merger.new.merge(classes)
+  end
+
   PRIMARY_CLASSES = " bg-primary text-primary-foreground hover:bg-primary/80 "
   SECONDARY_CLASSES = " bg-secondary text-secondary-foreground hover:bg-secondary/80 "
   OUTLINE_CLASSES = "  border border-input bg-background hover:bg-accent hover:text-accent-foreground "

data/app/helpers/examples_helper.rb

@@ -15,10 +15,15 @@ module ExamplesHelper
     render "examples/components/#{name}/usage"
   end
 
+  def render_code_preview(name)
+    render "examples/components/#{name}/code/preview"
+  end
+
   def code_partial(name, language)
+    component, partial = name.split("/")
     content_tag :pre, class: "code-sample py-4 px-4", data: {controller: "highlight"} do
       content_tag :code, class: "language-#{language}" do
-        html_escape(File.read(Rails.root.join("app", "views", "examples", "components", "#{name}.erb")))
+        html_escape(File.read(Rails.root.join("app", "views", "examples", "components", "#{component}/code/_#{partial}.erb")))
       end
     end
   end

data/app/javascript/controllers/highlight_controller.js

@@ -3,7 +3,6 @@ import hljs from "highlight.js";
 
 export default class extends Controller {
   connect() {
-    console.log("hi");
     hljs.highlightAll();
   }
 }

data/app/javascript/controllers/ui/dialog_controller.js

@@ -1,6 +1,6 @@
 // Inspired by https://github.com/kanety/stimulus-dialog
 import { Controller } from "@hotwired/stimulus";
-import "@kanety/stimulus-static-actions";
+import "https://ga.jspm.io/npm:@kanety/stimulus-static-actions@1.0.1/dist/index.modern.js";
 
 export default class UIDialog extends Controller {
   static targets = ["dialog", "modal", "focus", "drag", "backdrop", "closeButton"];

data/app/javascript/controllers/ui/dropdown_controller.js

@@ -1,5 +1,5 @@
 // Inspired By: https://github.com/stimulus-components/stimulus-dropdown/blob/master/src/index.ts
 import UIPopover from "controllers/ui/popover_controller";
-import { useTransition } from "stimulus-use";
+import { useTransition } from "https://ga.jspm.io/npm:stimulus-use@0.51.3/dist/index.js";
 
 export default class extends UIPopover {}

data/app/javascript/controllers/ui/hover-card_controller.js

@@ -1,9 +1,8 @@
 // Inspired by: https://github.com/excid3/tailwindcss-stimulus-components/blob/master/src/popover.js
 
 import { Controller } from "@hotwired/stimulus";
-import { createPopper } from "@popperjs/core";
-import { useDebounce } from "stimulus-use";
-import { useHover } from "stimulus-use";
+import { createPopper } from "https://ga.jspm.io/npm:@popperjs/core@2.11.8/lib/index.js";
+import { useDebounce, useHover } from "https://ga.jspm.io/npm:stimulus-use@0.51.3/dist/index.js";
 
 export default class UIHoverCardController extends Controller {
   static debounces = ["mouseEnter", "mouseLeave"];

data/app/javascript/controllers/ui/popover_controller.js

@@ -1,7 +1,8 @@
 // Inspired by: https://github.com/excid3/tailwindcss-stimulus-components/blob/master/src/popover.js
 
 import { Controller } from "@hotwired/stimulus";
-import { createPopper } from "@popperjs/core";
+import { createPopper } from "https://ga.jspm.io/npm:@popperjs/core@2.11.8/lib/index.js";
+import { useClickOutside } from "https://ga.jspm.io/npm:stimulus-use@0.51.3/dist/index.js";
 
 export default class UIPopover extends Controller {
   static values = {
@@ -9,9 +10,8 @@ export default class UIPopover extends Controller {
   };
   static targets = ["content", "wrapper", "trigger"];
 
-  // Sets the popover offset using Stimulus data map objects.
-
   connect() {
+    useClickOutside(this);
     this.popperInstance = createPopper(this.triggerTarget, this.contentTarget, {
       placement: this.contentTarget.dataset.side || "bottom",
       modifiers: [
@@ -37,6 +37,10 @@ export default class UIPopover extends Controller {
     this.contentTarget.dataset.state = "closed";
   }
 
+  clickOutside(event) {
+    this.hide();
+  }
+
   // Toggle the popover on demand
   toggle(event) {
     this.popperInstance.update();

data/app/javascript/controllers/ui/sheet_controller.js

@@ -1,5 +1,5 @@
 import UIDialog from "controllers/ui/dialog_controller";
-import "@kanety/stimulus-static-actions";
+import "https://ga.jspm.io/npm:@kanety/stimulus-static-actions@1.0.1/dist/index.modern.js";
 
 export default class extends UIDialog {
   // Handles a button triggering the sheet in a different