shadcn-ui 0.0.4 → 0.0.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c7353625f737a5deeed84e83a9718a6201e151541995c11bedbeaa8b2f49234d
-  data.tar.gz: 6399387bda38280d3d1be1208f5ac7796d7370cc902d8a658c742c1bcb64186b
+  metadata.gz: cc5e15a7e38cfc62b7c6baeabfd28b0d1b1869d9c1af906cee95a6c1d6dafb0e
+  data.tar.gz: 4ace082612e01960d714dc068e734a67d57cac288f77bb13eed827d22591e87e
 SHA512:
-  metadata.gz: bb839cd93e13cf9ea774d8d7dd1596bedd48ba02d570c65c8a125be616cbdae81a9f29fd46de71c13150b4a35c8709b5d57b813d21b74ee33076ead527cff827
-  data.tar.gz: e9a6a20f2f23bbc542800bb1bfe6cd1c6bbc08ed6f586590e61f956dff5973aab0b711c912e1b9305c06c019f1045a9ba74a3174d34a3b46ce933bb47a9ec8cb
+  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/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] = "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/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/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,8 +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 { useClickOutside } from "stimulus-use";
+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 = {

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

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

@@ -4,40 +4,67 @@ export default class UIToastController extends Controller {
   static targets = ["item"];
 
   connect() {
-    setTimeout(() => {
-      this.openAll();
-    }, 1000);
+    if (this.element.role == "region" && this.element.dataset.auto != "false") {
+      setTimeout(() => {
+        this.open();
+      }, 1000);
+      this.close();
+    }
+  }
+
+  open() {
+    const toastElement = this.element.querySelector("[data-ui--toast-target='item']");
+    this.element.dataset.state = "open";
+    this.element.classList.remove("hidden");
+    this.showToast(toastElement);
+  }
+
+  close() {
+    const toastElement = this.element.querySelector("[data-ui--toast-target='item']");
+    this.element.dataset.state = "closed";
+    this.element.classList.add("hidden");
+    this.closeToast(toastElement);
+  }
+
+  showToast(el) {
+    if (el) {
+      el.dataset.state = "open";
+      el.classList.remove("hidden");
+    }
+  }
 
-    this.closeAll();
+  closeToast(el) {
+    if (el) {
+      setTimeout(() => {
+        el.dataset.state = "closed";
+        el.classList.add("hidden");
+      }, el.dataset.duration || 3000);
+    }
+  }
+
+  trigger() {
+    const idTarget = this.element.dataset.target;
+    const toastContainer = document.querySelector(`${idTarget}`);
+    toastContainer.dataset.state = "open";
+    toastContainer.classList.remove("hidden");
+    const toastElement = toastContainer.querySelector("[data-ui--toast-target='item']");
+    this.showToast(toastElement);
+    this.closeToast(toastElement);
   }
 
   openAll() {
-    const toastElements = document.querySelectorAll("[data-ui--toast-target='item']");
+    const toastElements = document.querySelectorAll(
+      "[data-ui--toast-target='item']:not([data-visible='false'])",
+    );
     toastElements.forEach((toastElement) => {
-      toastElement.dataset.state = "open";
-      toastElement.classList.remove("hidden");
+      this.showToast(toastElement);
     });
   }
 
   closeAll() {
     const toastElements = document.querySelectorAll("[data-ui--toast-target='item']");
     toastElements.forEach((toastElement) => {
-      setTimeout(() => {
-        toastElement.dataset.state = "closed";
-        toastElement.classList.add("hidden");
-      }, toastElement.dataset.duration);
+      this.closeToast(toastElement);
     });
   }
-
-  test() {
-    const $this = this;
-    this.closeAll();
-    setTimeout(() => {
-      $this.openAll();
-      setTimeout(() => {
-        $this.closeAll();
-      }, 3000);
-    }, 1000);
-  }
-  close() {}
 }

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

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus";
-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 Controller {
   connect() {

data/app/models/user.rb

@@ -0,0 +1,9 @@
+class User
+  include ActiveModel::API
+  include ActiveModel::SecurePassword
+
+  attr_accessor :email, :password_digest
+
+  has_secure_password
+  validates :email, presence: true
+end

data/app/views/components/ui/_alert_dialog.html.erb

@@ -1,7 +1,7 @@
 <div data-controller="ui--dialog">
+  <div data-action="click->ui--dialog#open"><%= content_for(:alert_dialog_trigger) %></div>
   <%= render "components/ui/shared/backdrop", as: "backdrop" %>
 
-  <%= trigger %>
   <div
     role="alertdialog"
     data-state="closed"
@@ -9,12 +9,16 @@
     tabindex="-1"
     style="pointer-events: auto"
     data-ui--dialog-target="dialog">
-    <div class="flex flex-col space-y-2 text-center sm:text-left">
-      <h2 class="text-lg font-semibold"><%= label %></h2>
-      <p class="text-sm text-muted-foreground"><%= description %></p>
-    </div>
+      <div>
+        <%= content_for(:alert_dialog_content) %>
+      </div>
     <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
-      <%= cancel %> <%= continue %>
+      <div data-action="click->ui--dialog#close">
+        <%= content_for(:alert_dialog_cancel) %>
+      </div>
+      <div data-action="click->ui--dialog#close">
+        <%= content_for(:alert_dialog_continue) %>
+      </div>
     </div>
   </div>
 </div>

data/app/views/components/ui/_dialog.html.erb

@@ -41,29 +41,3 @@
       </button>
   </div>
 </div>
-<!-- <div data-controller="ui--dialog">
-  <div
-    data-ui--dialog-target="modal"
-    data-state="closed"
-    class="hidden fixed 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"
-    style="pointer-events: auto"
-    data-aria-hidden="true"
-    aria-hidden="true"></div>
-
-  <%#= trigger %>
-  <div
-    role="alertdialog"
-    data-state="closed"
-    class="hidden 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"
-    tabindex="-1"
-    style="pointer-events: auto"
-    data-ui--dialog-target="dialog">
-    <div class="flex flex-col space-y-2 text-center sm:text-left">
-      <h2 class="text-lg font-semibold"><%#= label %></h2>
-      <p class="text-sm text-muted-foreground"><%#= description %></p>
-    </div>
-    <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
-      <%#= cancel %> <%#= continue %>
-    </div>
-  </div>
-</div> -->

data/app/views/components/ui/_filter.html.erb

@@ -2,7 +2,7 @@
 <%= render_card do %>
   <div class="flex items-center">
   <%= content_for :filter_icon %>
-  <%= render_input name: "filter", placeholder: "Filter items...", style: :borderless, class: input_class, data: {"ui--filter-target": "source", action: "input->ui--filter#filter"} %></div>
+  <%= render_input name: "filter", placeholder: "Filter items...", variant: :borderless, class: input_class, data: {"ui--filter-target": "source", action: "input->ui--filter#filter"} %></div>
   <%= render_separator %>
   <div class="<%= options[:class] %>">
     <%= content_tag :div, role: "group" do

data/app/views/components/ui/_input.html.erb

@@ -2,6 +2,9 @@
 <%= text_field_tag name, value, type: type, id: id,
               class: options[:class],
               placeholder: options[:placeholder],
+              autocomplete: options[:autocomplete],
+              autocapitalize: options[:autocapitalize],
+              autocorrect: options[:autocorrect],
               disabled: options[:disabled],
               required: options[:required],
               readonly: options[:readonly],

data/app/views/components/ui/_label.html.erb

@@ -1,3 +1,3 @@
 <%= label_tag name, label,
   data: options[:data],
-  class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 #{options[:class]}" %>
+  class: tw("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 #{options[:class]}") %>

data/app/views/components/ui/_toast.html.erb

@@ -1,4 +1,8 @@
-<div role="region" aria-label="Notifications (F8)" tabindex="-1" style="" data-controller="ui--toast #{data[:controller]}">
+<div role="region" aria-label="Notifications (F8)" tabindex="-1" style=""
+  id="<%= options[:id] %>"
+  data-controller="ui--toast <%= data[:controller] %>"
+  data-auto="<%= options[:auto] %>"
+  class="hidden">
   <span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; overflow-wrap: normal;"></span>
   <ol tabindex="-1" class="fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]">
     <li role="status"
@@ -9,7 +13,7 @@
       data-ui--toast-target="item"
       data-swipe-direction="right"
       data-duration="5000"
-      class="toast-item hidden group pointer-events-auto relative flex w-full items-center
+      class="<%= tw("toast-item hidden group pointer-events-auto relative flex w-full items-center
             justify-between space-x-4 overflow-hidden rounded-md p-6 pr-8 shadow-lg
              transition-all
              data-[swipe=cancel]:translate-x-0
@@ -20,14 +24,14 @@
              data-[state=closed]:fade-out-80
              data-[state=open]:slide-in-from-top-full
              data-[state=open]:sm:slide-in-from-bottom-full
-             border bg-background"
+             border bg-background #{options[:class]}") %>"
       style="user-select: none; touch-action: none;">
       <div class="grid gap-1">
         <div class="text-sm font-semibold"><%= header %></div>
         <div class="text-sm opacity-90"><%= description %></div>
       </div>
       <%= action %>
-      <button data-action="ui--toast#closeAll" type="button" class="absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600" toast-close="" data-radix-toast-announce-exclude=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><line x1="18" x2="6" y1="6" y2="18"></line><line x1="6" x2="18" y1="6" y2="18"></line></svg></button>
+      <button data-action="ui--toast#close" type="button" class="absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600" toast-close="" data-radix-toast-announce-exclude=""><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4"><line x1="18" x2="6" y1="6" y2="18"></line><line x1="6" x2="18" y1="6" y2="18"></line></svg></button>
     </li>
   </ol>
   <span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; overflow-wrap: normal;"></span>

data/app/views/documentation/installation.html.md

@@ -32,7 +32,7 @@ The components need a few things in order to render and function properly
    package.json if you need via `echo '{}' >> package.json`.
 
 ```
-npm install -D tailwind-animate
+npm install -D tailwindcss-animate
 ```
 
 These are the requirements if you want to add them individually:

data/app/views/examples/components/alert-dialog/_usage.html.erb

@@ -0,0 +1,24 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Alert Dialog component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/alert_dialog_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_alert_dialog.html.erb") %></li>
+</ul>
+
+And relies on <%= code("app/javascript/controllers/ui/dialog_controller.js") %>.
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+The method <%= code("render_alert_dialog") %> defined in <%= code("app/helpers/components/alert_dialog_helper.rb") %>
+accepts a block for the inner components  of the dialog. It renders the partial
+<%= code("app/views/components/ui/_alert_dialog.html.erb") %> which contains the model structure and
+and the 2 actions buttons of continue and cancel.
+</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+The modal is composed of 4 components with corresponding helper methods, <%= code("alert_dialog_trigger") %>,
+which accepts a block for the element that will trigger the modal, and <%= code("alert_dialog_content") %>,
+which accepts a block for the body of the modal and the two actions for the modal, <%= code("alert_dialog_cancel") %> for the element that you would like to cancel the dialog interaction, for example a button, and <%= code("alert_dialog_continue") %> for the element you would like to use to continue to interaction. Note, you should feel free to bind your own data actions to these buttons as they are enclosed in an element that will handle closing the modal on click.
+</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+See <a href="/docs/components/dialog">Dialog</a> for more context as this component inherits functionality from that one.</p>

data/app/views/examples/components/alert-dialog/code/_preview.erb

@@ -1,6 +1,22 @@
-<%= render_alert_dialog(
-  trigger: render_button("Open Dialog", variant: :outline, data: {action: "ui--dialog#open" }),
-  continue: render_button("Continue"),
-  label: "Are you absolutely sure?",
-  description: "This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
-) %>
+<%= render_alert_dialog do %>
+  <%= alert_dialog_trigger do %>
+    <%= render_button("Open Dialog", variant: :outline) %>
+  <% end %>
+
+  <%= alert_dialog_content do %>
+  <div class="flex flex-col space-y-2 text-center sm:text-left">
+    <h2 class="text-lg font-semibold">Are you absolutely sure?</h2>
+    <p class="text-sm text-muted-foreground">
+      This action cannot be undone. This will permanently delete your account and remove your data from our servers.
+    </p>
+  </div>
+  <% end %>
+
+  <%= alert_dialog_cancel do %>
+    <%= render_button("Cancel", variant: :outline) %>
+  <% end %>
+
+  <%= alert_dialog_continue do %>
+    <%= render_button("Continue") %>
+  <% end %>
+<% end %>

data/app/views/examples/components/alert-dialog/code/_usage.erb

@@ -0,0 +1,13 @@
+<%= render_alert_dialog do %>
+  <%= alert_dialog_trigger do %>
+  <% end %>
+
+  <%= alert_dialog_content do %>
+  <% end %>
+
+  <%= alert_dialog_cancel do %>
+  <% end %>
+
+  <%= alert_dialog_continue do %>
+  <% end %>
+<% end %>

data/app/views/examples/components/alert-dialog.html.erb

@@ -15,7 +15,13 @@
 
 <%= render_preview %>
 
-
 <h2 class="font-heading scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0" id="installation">Installation</h2>
+<%= code_sample(language: "sh") do %>
+rails generate shadcn-ui alert-dialog
+<% end %>
 
 <h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 mb-2 text-2xl font-semibold tracking-tight first:mt-0" id="usage"><a href="/docs/components/dialog#usage">Usage</a></h2>
+
+<%= code_partial("alert-dialog/usage", :erb) %>
+
+<%= render_usage("alert-dialog") %>

data/app/views/examples/components/card/code/_usage.erb

@@ -1,3 +1,3 @@
-<%= render(title: nil, subtitle: nil, body: nil, footer: nil:) do %>
+<%= render_card(title: nil, subtitle: nil, body: nil, footer: nil:) do %>
   <!-- Optional Body Block -->
 <% end %>

data/app/views/examples/components/forms/_usage.html.erb

@@ -0,0 +1,28 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Forms component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/form_builders/shadcn_form_builder.rb") %></li>
+  <li><%= code("app/helpers/components/forms_helper.rb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+  The <code>ShadcnFormBuilder</code> is a custom form builder that extends the
+  <code>FormBuilder</code> class. It adds the following methods that provide the form with inputs and controls:
+<p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("label") %></li>
+  <li><%= code("text_field") %></li>
+  <li><%= code("password_field") %></li>
+  <li><%= code("email_field") %></li>
+</ul>
+</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+  To use these methods which generate the styled, ActiveModel backed form, you use the <%= code("render_form_for") %> or <%= code("render_form_with") %> methods provided by <%= code("app/helpers/components/forms_helper.rb") %>.
+  These methods yield the common <code>FormBuilder</code> instance that you can use to generate the controls and inputs above.
+</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+  If a form field or attribute fails validation, its label and input will be given an <code>error</code> class to allow for styling. The default <code>error</code> style is defined in <%= code("app/assets/stylesheets/shadcn.css") %>
+</p>

data/app/views/examples/components/forms/code/_preview.erb

@@ -0,0 +1,13 @@
+<%= render_form_for(@user, class: "w-full") do |form| %>
+  <div class="grid grid-cols-3 items-baseline mb-4">
+    <%= form.label :email, class: "text-right mr-4 text-lg" %>
+    <%= form.text_field :email, class: "col-span-2" %>
+  </div>
+  <div class="grid grid-cols-3 items-baseline">
+    <%= form.label :password, class: "text-right mr-4 text-lg" %>
+    <%= form.password_field :password, class: "col-span-2 mb-8" %>
+  </div>
+  <div class="flex justify-center">
+    <%= form.submit "Create Account" %>
+  </div>
+<% end %>

data/app/views/examples/components/forms/code/_usage.erb

@@ -0,0 +1,6 @@
+<%= render_form_for() do |form| %>
+  <%= form.label :email %>
+  <%= form.text_field  %>
+  <%= form.password_field %>
+  <%= form.submit "Submit" %>
+<% end %>

data/app/views/examples/components/forms.html.erb

@@ -0,0 +1,23 @@
+<%= render_component_header title: "Forms",
+      description: "Creates an ActiveModel backed form with error " %>
+
+<% content_for :preview, flush: true do %>
+<div class="w-full flex justify-center">
+  <%= render_code_preview('forms') %>
+</div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("forms/preview", :erb) %>
+<% end %>
+
+<%= render_preview %>
+
+<h2 class="font-heading scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0" id="installation">Installation</h2>
+<%= code_sample(language: "sh") do %>
+  rails generate shadcn-ui forms
+<% end %>
+
+<h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 mb-2 text-2xl font-semibold tracking-tight first:mt-0" id="usage">Usage</h2>
+<%= code_partial("forms/usage", :erb) %>
+<%= render_usage("forms") %>

data/app/views/examples/components/toast/code/_destructive.erb

@@ -0,0 +1,6 @@
+<%= render_toast header: "Invalid Login",
+      id: "alert_toast",
+      description: "Could not find email password combination.",
+      variant: :destructive,
+      auto: false,
+      class: "hidden" %>

data/app/views/examples/components/toast/code/_preview.erb

@@ -1,3 +1,4 @@
-  <%= render_toast header: "Scheduled: Catch up",
-    description: "Friday, February 10, 2023 at 5:57 PM",
-    action: render_button("Undo", variant: :outline) %>
+<%= render_toast header: "Scheduled: Catch up",
+  description: "Friday, February 10, 2023 at 5:57 PM",
+  action: render_button("Undo", variant: :outline),
+  id: "default_toast" %>

data/app/views/examples/components/toast.html.erb

@@ -2,8 +2,10 @@
       description: "A succinct message that is displayed temporarily." %>
 
 <% content_for :preview, flush: true do %>
-  <%= render_button "Trigger Toast", variant: "outline", data: {controller: "ui--toast", action: "ui--toast#test"} %>
-  <%= render_code_preview('toast') %>
+  <div class="w-full flex justify-center">
+    <%= render_button "Trigger Toast", variant: "outline", data: {controller: "ui--toast", action: "ui--toast#trigger", target: "#default_toast"} %>
+    <%= render_code_preview('toast') %>
+  </div>
 <% end %>
 
 <% content_for :code, flush: true do %>
@@ -21,3 +23,16 @@
 <%= code_partial("toast/usage", :erb) %>
 
 <%= render_usage("toast") %>
+
+<% content_for :examples, flush: true do %>
+  <div class="w-full flex justify-center">
+    <%= render_button "Trigger Destructive Toast", variant: "outline", data: {controller: "ui--toast", action: "ui--toast#trigger", target: "#alert_toast"} %>
+    <%= render "examples/components/toast/code/destructive" %>
+  </div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("toast/destructive", :erb) %>
+<% end %>
+
+<%= render_example %>

data/app/views/layouts/shared/_components.html.erb

@@ -18,7 +18,7 @@
         <div class="grid grid-flow-row auto-rows-max text-sm">
           <%= sidebar_link "✅ 📖 Accordion", "/docs/components/accordion" %>
           <%= sidebar_link "✅ 📖 Alert", "/docs/components/alert" %>
-          <%#= sidebar_link "✅ Alert Dialog", "/docs/components/alert-dialog" %>
+          <%= sidebar_link "✅ 📖 Alert Dialog", "/docs/components/alert-dialog" %>
           <%#= sidebar_link "❌ Aspect Ratio", "/docs/components/aspect-ratio" %>
           <%#= sidebar_link "❌ Avatar", "/docs/components/avatar" %>
           <%= sidebar_link "✅ 📖 Badge", "/docs/components/badge" %>
@@ -34,8 +34,8 @@
           <%#= sidebar_link "Date Picker", "/docs/components/date-picker" %>
           <%= sidebar_link "✅ 📖 Dialog", "/docs/components/dialog" %>
           <%= sidebar_link "✅ 📖 Dropdown Menu", "/docs/components/dropdown-menu" %>
-          <%= sidebar_link "➕ 📖 Filter", "/docs/components/filter" %>
-          <%#= sidebar_link "Form", "/docs/components/form" %>
+          <%= sidebar_link "✅ 📖 Filter", "/docs/components/filter" %>
+          <%= sidebar_link "✅ 📖  Forms", "/docs/components/forms" %>
           <%= sidebar_link "✅ 📖 Hover Card", "/docs/components/hover-card" %>
           <%= sidebar_link "✅ 📖 Input", "/docs/components/input" %>
           <%= sidebar_link "✅ 📖 Label", "/docs/components/label" %>

data/config/routes.rb

@@ -8,6 +8,9 @@ Rails.application.routes.draw do
   get "/docs/:id" => "documentation#show", :as => :documentation, :format => false
   get "/docs", to: "documentation#index", as: :documentation_index
 
+  # This is just for the forms component
+  resources :users
+
   # Defines the root path route ("/")
   root "application#index"
 end

data/lib/components.json

@@ -24,7 +24,8 @@
       "app/helpers/components/alert-dialog_helper.rb",
       "app/views/components/ui/_alert-dialog.html.erb",
       "app/javascript/controllers/ui/alert-dialog_controller.js"
-    ]
+    ],
+    "dependencies": [{ "component": "dialog" }]
   },
   "badge": {
     "name": "badge",
@@ -111,6 +112,17 @@
       "app/views/components/ui/shared/_menu_item.html.erb"
     ]
   },
+  "forms": {
+    "name": "forms",
+    "type": "components:ui",
+    "files": ["app/helpers/components/forms_helper.rb", "app/form_builders/shadcn_form_builder.rb"],
+    "dependencies": [
+      { "component": "input" },
+      { "component": "label" },
+      { "component": "textarea" },
+      { "component": "button" }
+    ]
+  },
   "hover-card": {
     "name": "hover-card",
     "type": "components:ui",

data/lib/generators/shadcn-ui_generator.rb

@@ -67,7 +67,7 @@ class ShadcnUiGenerator < Rails::Generators::Base
 
     available_components.each do |component, _|
       description = "# A #{component} component"
-      banner_line = "rails g shadcn_ui #{component}:install #{" " * (20 - component.length)} #{description}"
+      banner_line = "rails generate shadcn-ui #{component}:install #{" " * (20 - component.length)} #{description}"
       puts banner_line
     end
   end

data/lib/shadcn-ui/version.rb

@@ -1,3 +1,3 @@
 module ShadcnUi
-  VERSION = "0.0.4"
+  VERSION = "0.0.5"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: shadcn-ui
 version: !ruby/object:Gem::Version
-  version: 0.0.4
+  version: 0.0.5
 platform: ruby
 authors:
 - Avi Flombaum
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-07-18 00:00:00.000000000 Z
+date: 2023-07-26 00:00:00.000000000 Z
 dependencies: []
 description: This gem is a documentation site and gem that will copy components from
   the shadcn-ui library into a Ruby on Rails application.
@@ -44,6 +44,8 @@ files:
 - app/controllers/components_controller.rb
 - app/controllers/concerns/.keep
 - app/controllers/documentation_controller.rb
+- app/controllers/users_controller.rb
+- app/form_builders/shadcn_form_builder.rb
 - app/helpers/application_helper.rb
 - app/helpers/components/accordion_helper.rb
 - app/helpers/components/alert_dialog_helper.rb
@@ -56,6 +58,7 @@ files:
 - app/helpers/components/dialog_helper.rb
 - app/helpers/components/dropdown_menu_helper.rb
 - app/helpers/components/filter_helper.rb
+- app/helpers/components/forms_helper.rb
 - app/helpers/components/hover_card_helper.rb
 - app/helpers/components/input_helper.rb
 - app/helpers/components/label_helper.rb
@@ -98,6 +101,7 @@ files:
 - app/mailers/application_mailer.rb
 - app/models/application_record.rb
 - app/models/concerns/.keep
+- app/models/user.rb
 - app/views/application/index.html.erb
 - app/views/components/ui/_accordion.html.erb
 - app/views/components/ui/_alert.html.erb
@@ -143,6 +147,7 @@ files:
 - app/views/examples/components/accordion/code/_preview.erb
 - app/views/examples/components/accordion/code/_usage.erb
 - app/views/examples/components/alert-dialog.html.erb
+- app/views/examples/components/alert-dialog/_usage.html.erb
 - app/views/examples/components/alert-dialog/code/_preview.erb
 - app/views/examples/components/alert-dialog/code/_usage.erb
 - app/views/examples/components/alert.html.erb
@@ -191,6 +196,10 @@ files:
 - app/views/examples/components/filter/code/_icon.html.erb
 - app/views/examples/components/filter/code/_preview.erb
 - app/views/examples/components/filter/code/_usage.erb
+- app/views/examples/components/forms.html.erb
+- app/views/examples/components/forms/_usage.html.erb
+- app/views/examples/components/forms/code/_preview.erb
+- app/views/examples/components/forms/code/_usage.erb
 - app/views/examples/components/hover-card.html.erb
 - app/views/examples/components/hover-card/_usage.html.erb
 - app/views/examples/components/hover-card/code/_preview.erb
@@ -237,6 +246,7 @@ files:
 - app/views/examples/components/textarea/code/_usage.erb
 - app/views/examples/components/toast.html.erb
 - app/views/examples/components/toast/_usage.html.erb
+- app/views/examples/components/toast/code/_destructive.erb
 - app/views/examples/components/toast/code/_preview.erb
 - app/views/examples/components/toast/code/_usage.erb
 - app/views/examples/components/toggle.html.erb