shadcn-ui 0.0.1

data/app/views/examples/authentication/index.html.erb

@@ -0,0 +1,148 @@
+<div class="overflow-hidden rounded-[0.5rem] border bg-background shadow">
+  <div class="md:hidden">
+    <img
+      alt="Authentication"
+      loading="lazy"
+      width="1280"
+      height="843"
+      decoding="async"
+      data-nimg="1"
+      class="block dark:hidden"
+      srcset="
+        /_next/image?url=%2Fexamples%2Fauthentication-light.png&amp;w=1920&amp;q=75 1x,
+        /_next/image?url=%2Fexamples%2Fauthentication-light.png&amp;w=3840&amp;q=75 2x
+      "
+      src="/_next/image?url=%2Fexamples%2Fauthentication-light.png&amp;w=3840&amp;q=75"
+      style="color: transparent"
+    /><img
+      alt="Authentication"
+      loading="lazy"
+      width="1280"
+      height="843"
+      decoding="async"
+      data-nimg="1"
+      class="hidden dark:block"
+      srcset="
+        /_next/image?url=%2Fexamples%2Fauthentication-dark.png&amp;w=1920&amp;q=75 1x,
+        /_next/image?url=%2Fexamples%2Fauthentication-dark.png&amp;w=3840&amp;q=75 2x
+      "
+      src="/_next/image?url=%2Fexamples%2Fauthentication-dark.png&amp;w=3840&amp;q=75"
+      style="color: transparent"
+    />
+  </div>
+  <div
+    class="container relative hidden h-[800px] flex-col items-center justify-center md:grid lg:max-w-none lg:grid-cols-2 lg:px-0"
+  >
+    <a
+      class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 absolute right-4 top-4 md:right-8 md:top-8"
+      href="/examples/authentication"
+      >Login</a
+    >
+    <div
+      class="relative hidden h-full flex-col bg-muted p-10 text-white dark:border-r lg:flex"
+    >
+      <div class="absolute inset-0 bg-zinc-900"></div>
+      <div class="relative z-20 flex items-center text-lg font-medium">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="mr-2 h-6 w-6"
+        >
+          <path
+            d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3"
+          ></path></svg
+        >Acme Inc
+      </div>
+      <div class="relative z-20 mt-auto">
+        <blockquote class="space-y-2">
+          <p class="text-lg">
+            “This library has saved me countless hours of work and helped me
+            deliver stunning designs to my clients faster than ever before.”
+          </p>
+          <footer class="text-sm">Sofia Davis</footer>
+        </blockquote>
+      </div>
+    </div>
+    <div class="lg:p-8">
+      <div
+        class="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]"
+      >
+        <div class="flex flex-col space-y-2 text-center">
+          <h1 class="text-2xl font-semibold tracking-tight">
+            Create an account
+          </h1>
+          <p class="text-sm text-muted-foreground">
+            Enter your email below to create your account
+          </p>
+        </div>
+        <div class="grid gap-6">
+          <form>
+            <div class="grid gap-2">
+              <div class="grid gap-1">
+                <label
+                  class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sr-only"
+                  for="email"
+                  >Email</label
+                ><input
+                  class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                  id="email"
+                  placeholder="name@example.com"
+                  autocapitalize="none"
+                  autocomplete="email"
+                  autocorrect="off"
+                  type="email"
+                />
+              </div>
+              <button
+                class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2"
+              >
+                Sign In with Email
+              </button>
+            </div>
+          </form>
+          <div class="relative">
+            <div class="absolute inset-0 flex items-center">
+              <span class="w-full border-t"></span>
+            </div>
+            <div class="relative flex justify-center text-xs uppercase">
+              <span class="bg-background px-2 text-muted-foreground"
+                >Or continue with</span
+              >
+            </div>
+          </div>
+          <button
+            class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2"
+            type="button"
+          >
+            <svg viewBox="0 0 438.549 438.549" class="mr-2 h-4 w-4">
+              <path
+                fill="currentColor"
+                d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
+              ></path>
+            </svg>
+            Github
+          </button>
+        </div>
+        <p class="px-8 text-center text-sm text-muted-foreground">
+          By clicking continue, you agree to our
+          <a
+            class="underline underline-offset-4 hover:text-primary"
+            href="/terms"
+            >Terms of Service</a
+          >
+          and
+          <a
+            class="underline underline-offset-4 hover:text-primary"
+            href="/privacy"
+            >Privacy Policy</a
+          >.
+        </p>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,17 @@
+<%= render "layouts/documentation/component_header",
+  title: "Accordion",
+  description: "A vertically stacked set of interactive headings that each reveal a section of content." %>
+
+<% content_for :preview, flush: true do %>
+<div class="w-full">
+  <%= 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 %>
+</div>
+<% 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>
+
+<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>

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

@@ -0,0 +1,24 @@
+<!--prettier-ignore-->
+<%= render "layouts/documentation/component_header",
+  title: "Alert Dialog",
+  description: "A modal dialog that interrupts the user with important content and expects a response." %>
+
+<%= content_for :preview, flush: true do %>
+<div class="w-full flex justify-center">
+  <!--prettier-ignore-->
+
+  <!--prettier-ignore-->
+  <%= 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.",
+  ) %>
+</div>
+<% 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>
+
+<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>

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

@@ -0,0 +1,22 @@
+<!--prettier-ignore-->
+<%= render "layouts/documentation/component_header",
+  title: "Alert",
+  description: "Displays a callout for user attention" %>
+
+<% content_for :preview, flush: true do %>
+<div class="w-full">
+  <%= render_alert title: "Did you know?", description: "You can wrap shadcn helpers in any
+  component library you want!" %>
+</div>
+
+<div class="w-full">
+  <%= render_alert(variant: :error, title: "Did you know?", description: "You can wrap shadcn
+  helpers in any component library you want!") %>
+</div>
+<% 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>
+
+<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>

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

@@ -0,0 +1,30 @@
+<!--prettier-ignore-->
+
+<%= render "layouts/documentation/component_header",
+  title: "Badge",
+  description: "Displays a badge or a component that looks like a badge." %>
+
+<%= content_for :preview, flush: true do %>
+<div class="w-full mx-auto flex justify-center"><%= render_badge text: "Badge" %></div>
+<div class="w-full mx-auto flex justify-center">
+  <%= render_badge text: "Secondary", variant: :secondary %>
+</div>
+<div class="w-full mx-auto flex justify-center">
+  <%= render_badge text: "Destructive", variant: :destructive %>
+</div>
+<div class="w-full mx-auto flex justify-center">
+  <%= render_badge text: "Outline", variant: :outline %>
+</div>
+<div class="w-full mx-auto flex justify-center">
+  <%= render_badge text: "Ghost", variant: :ghost %>
+</div>
+<div class="w-full mx-auto flex justify-center">
+  <%= render_badge text: "Ghost Link", variant: :ghost, as: :link %>
+</div>
+<% 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>
+
+<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>

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

@@ -0,0 +1,33 @@
+<!--prettier-ignore-->
+
+<%= render "layouts/documentation/component_header",
+  title: "Button",
+  description: "Displays a button or a component that looks like a button." %>
+
+<%= content_for :preview, flush: true do %>
+<div class="w-full mx-auto flex justify-center"><%= render_button text: "Button" %></div>
+<div class="w-full mx-auto flex justify-center">
+  <%= render_button text: "Link", as: :link, href: "/" %>
+</div>
+<div class="w-full mx-auto flex justify-center">
+  <%= render_button text: "Secondary", variant: :secondary %>
+</div>
+<div class="w-full mx-auto flex justify-center">
+  <%= render_button text: "Destructive", variant: :destructive %>
+</div>
+<div class="w-full mx-auto flex justify-center">
+  <%= render_button text: "Outline", variant: :outline %>
+</div>
+<div class="w-full mx-auto flex justify-center">
+  <%= render_button text: "Ghost", variant: :ghost %>
+</div>
+<div class="w-full mx-auto flex justify-center">
+  <%= render_button text: "Ghost Link", variant: :ghost, as: :link %>
+</div>
+<% 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>
+
+<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>

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

@@ -0,0 +1,156 @@
+<!--prettier-ignore-->
+<%= render "layouts/documentation/component_header",
+  title: "Card",
+  description: "Displays a card with header, content, and footer." %>
+
+<%= content_for :preview, flush: true do %>
+<div class="w-full flex justify-center"><%= render_card body: "The Most Basic of Cards" %></div>
+<div class="w-full flex justify-center">
+  <%= render_card title: "Did you know?", body: "You can embed any HTML in the body of a card by
+  yielding to a block for the body?", subtitle: "This is important." %>
+</div>
+
+<div class="w-full flex justify-center">
+  <%= render_card title: "Card with Form" do %>
+  <div class="p-6 pt-0">
+    <form>
+      <div class="grid w-full items-center gap-4">
+        <div class="flex flex-col space-y-1.5">
+          <label
+            class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            for="name">Name</label><input
+            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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+            id="name"
+            placeholder="Name of your project">
+        </div>
+        <div class="flex flex-col space-y-1.5">
+          <label
+            class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+            for="name">Framework</label><button
+            type="button"
+            role="combobox"
+            aria-controls="radix-:r76:"
+            aria-expanded="false"
+            aria-autocomplete="none"
+            dir="ltr"
+            data-state="closed"
+            data-placeholder=""
+            class="flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50">
+            <span style="pointer-events: none">Select</span><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 opacity-50"
+              aria-hidden="true">
+              <polyline points="6 9 12 15 18 9"></polyline>
+            </svg></button><select
+            aria-hidden="true"
+            tabindex="-1"
+            style="
+              position: absolute;
+              border: 0px;
+              width: 1px;
+              height: 1px;
+              padding: 0px;
+              margin: -1px;
+              overflow: hidden;
+              clip: rect(0px, 0px, 0px, 0px);
+              white-space: nowrap;
+              overflow-wrap: normal;
+            ">
+            <option value=""></option>
+            <option value="next">Next.js</option>
+            <option value="sveltekit">SvelteKit</option>
+            <option value="astro">Astro</option>
+            <option value="nuxt">Nuxt.js</option>
+          </select>
+        </div>
+      </div>
+    </form>
+  </div>
+  <div class="items-center p-6 pt-0 flex justify-between">
+    <button
+      class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2">
+      Cancel</button><button
+      class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">
+      Deploy
+    </button>
+  </div>
+  <% end %>
+</div>
+<div class="w-full flex justify-center">
+  <%= render_card title: "Notifications", footer: render_button(text: "Mark all as read", class:
+  "w-full") do %>
+  <div class="p-6 pt-0 grid gap-4">
+    <div class="flex items-center space-x-4 rounded-md border p-4">
+      <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="lucide lucide-bell-ring">
+        <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"></path>
+        <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"></path>
+        <path d="M4 2C2.8 3.7 2 5.7 2 8"></path>
+        <path d="M22 8c0-2.3-.8-4.3-2-6"></path>
+      </svg>
+      <div class="flex-1 space-y-1">
+        <p class="text-sm font-medium leading-none">Push Notifications</p>
+        <p class="text-sm text-muted-foreground">Send notifications to device.</p>
+      </div>
+      <button
+        type="button"
+        role="switch"
+        aria-checked="false"
+        data-state="unchecked"
+        value="on"
+        class="peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input">
+        <span
+          data-state="unchecked"
+          class="pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"></span>
+      </button>
+    </div>
+    <div>
+      <div class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
+        <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500"></span>
+        <div class="space-y-1">
+          <p class="text-sm font-medium leading-none">Your call has been confirmed.</p>
+          <p class="text-sm text-muted-foreground">1 hour ago</p>
+        </div>
+      </div>
+      <div class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
+        <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500"></span>
+        <div class="space-y-1">
+          <p class="text-sm font-medium leading-none">You have a new message!</p>
+          <p class="text-sm text-muted-foreground">1 hour ago</p>
+        </div>
+      </div>
+      <div class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
+        <span class="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500"></span>
+        <div class="space-y-1">
+          <p class="text-sm font-medium leading-none">Your subscription is expiring soon!</p>
+          <p class="text-sm text-muted-foreground">2 hours ago</p>
+        </div>
+      </div>
+    </div>
+  </div>
+  <% end %>
+</div>
+<% 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>
+
+<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>

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

@@ -0,0 +1,8 @@
+<%= render_component_header title: "Checkbox",
+      description: "A control that allows the user to toggle between checked and not checked." %>
+
+<%= content_for :preview, flush: true do %>
+  <%= render_checkbox label: "Accept terms and conditions", name: "terms" %>
+<% end %>
+
+<%= render_preview %>

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

@@ -0,0 +1,24 @@
+<!--prettier-ignore-->
+<%= render "layouts/documentation/component_header",
+  title: "Collapsible",
+  description: "An interactive component which expands/collapses a panel." %>
+
+<%= content_for :preview, flush: true do %>
+<div class="w-full flex justify-center">
+  <%= render_collapsible trigger: "@peduarte starred 3 repositories" do %>
+    <% content_for :preview do %>
+      <div class="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/primitives</div>
+    <% end %>
+    <% content_for :body do %>
+      <div class="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/colors</div>
+      <div class="rounded-md border px-4 py-3 font-mono text-sm">@stitches/react</div>
+    <% end %>
+  <% end %>
+</div>
+<% 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>
+
+<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>

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

@@ -0,0 +1,28 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Dialog component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/dialog_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_dialog.html.erb") %></li>
+  <li><%= code("app/javascript/controllers/ui/dialog_controller.js") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+The method <%= code("render_dialog") %> defined in <%= code("app/helpers/components/dialog_helper.rb") %>
+accepts a blog for the inner components  of the dialog.It renders the partial
+<%= code("app/views/components/ui/_dialog.html.erb") %> which contains the model structure and
+a close button.
+</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+The modal is composed of two components with corresponding helper methods, <%= code("dialog_trigger") %>,
+which accepts a block for the element that will trigger the modal,  and <%= code("dialog_content") %>,
+which accepts a block for the body of the modal.
+</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+<%= code("dialog_trigger") %> and <%= code("dialog_content") %> must be called nested within
+<%= code("render_dialog") %>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+<%= code("app/javascript/controllers/ui/dialog_controller.js") %> is a stimulus controller that provides
+the functionality of the modal.</p>

data/app/views/examples/components/dialog/code/form.erb

@@ -0,0 +1,48 @@
+
+<%= render_dialog do %>
+  <%= dialog_trigger do %>
+    <%= render_button("Dialog with Form", variant: :outline) %>
+  <% end %>
+  <%= dialog_content do %>
+    <div class="flex flex-col space-y-1.5 text-center sm:text-left">
+      <h2
+        id="radix-:r7m:"
+        class="text-lg font-semibold leading-none tracking-tight">
+        Edit profile
+      </h2>
+      <p
+        id="radix-:r7n:"
+        class="text-sm text-muted-foreground">
+        Make changes to your profile here. Click save when you're done.
+      </p>
+    </div>
+    <div class="grid gap-4 py-4">
+      <div class="grid grid-cols-4 items-center gap-4">
+        <label
+          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-right"
+          for="name">Name
+        </label>
+        <input
+          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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 col-span-3"
+          id="name"
+          value="Pedro Duarte">
+      </div>
+      <div class="grid grid-cols-4 items-center gap-4">
+        <label
+          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-right"
+          for="username">Username
+        </label>
+        <input
+          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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 col-span-3"
+          id="username"
+          value="@peduarte">
+      </div>
+      <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
+        <button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
+          type="submit">
+          Save changes
+        </button>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/views/examples/components/dialog/code/notifications.erb

@@ -0,0 +1,83 @@
+
+<%= render_dialog do %>
+  <%= dialog_trigger do %>
+    <%= render_button("Open Notifications", variant: :outline) %>
+  <% end %>
+  <%= dialog_content do %>
+    <div class="bg-card text-card-foreground">
+      <div class="flex flex-col space-y-1.5  pb-3">
+        <h3 class="font-semibold leading-none tracking-tight">Notifications</h3>
+        <p class="text-sm text-muted-foreground">Choose what you want to be notified about.</p>
+      </div>
+      <div class=" pt-0 grid gap-1">
+        <div class="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="mt-px h-5 w-5"><path d="M8.60124 1.25086C8.60124 1.75459 8.26278 2.17927 7.80087 2.30989C10.1459 2.4647 12 4.41582 12 6.79999V10.25C12 11.0563 12.0329 11.7074 12.7236 12.0528C12.931 12.1565 13.0399 12.3892 12.9866 12.6149C12.9333 12.8406 12.7319 13 12.5 13H8.16144C8.36904 13.1832 8.49997 13.4513 8.49997 13.75C8.49997 14.3023 8.05226 14.75 7.49997 14.75C6.94769 14.75 6.49997 14.3023 6.49997 13.75C6.49997 13.4513 6.63091 13.1832 6.83851 13H2.49999C2.2681 13 2.06664 12.8406 2.01336 12.6149C1.96009 12.3892 2.06897 12.1565 2.27638 12.0528C2.96708 11.7074 2.99999 11.0563 2.99999 10.25V6.79999C2.99999 4.41537 4.85481 2.46396 7.20042 2.3098C6.73867 2.17908 6.40036 1.75448 6.40036 1.25086C6.40036 0.643104 6.89304 0.150421 7.5008 0.150421C8.10855 0.150421 8.60124 0.643104 8.60124 1.25086ZM7.49999 3.29999C5.56699 3.29999 3.99999 4.86699 3.99999 6.79999V10.25L4.00002 10.3009C4.0005 10.7463 4.00121 11.4084 3.69929 12H11.3007C10.9988 11.4084 10.9995 10.7463 11 10.3009L11 10.25V6.79999C11 4.86699 9.43299 3.29999 7.49999 3.29999Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+          <div class="space-y-1">
+            <p class="text-sm font-medium leading-none">Everything</p>
+            <p class="text-sm text-muted-foreground">Email digest, mentions &amp; all activity.</p>
+          </div>
+        </div>
+        <div class="-mx-2 flex items-start space-x-4 rounded-md bg-accent p-2 text-accent-foreground transition-all"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="mt-px h-5 w-5"><path d="M7.5 0.875C5.49797 0.875 3.875 2.49797 3.875 4.5C3.875 6.15288 4.98124 7.54738 6.49373 7.98351C5.2997 8.12901 4.27557 8.55134 3.50407 9.31167C2.52216 10.2794 2.02502 11.72 2.02502 13.5999C2.02502 13.8623 2.23769 14.0749 2.50002 14.0749C2.76236 14.0749 2.97502 13.8623 2.97502 13.5999C2.97502 11.8799 3.42786 10.7206 4.17091 9.9883C4.91536 9.25463 6.02674 8.87499 7.49995 8.87499C8.97317 8.87499 10.0846 9.25463 10.8291 9.98831C11.5721 10.7206 12.025 11.8799 12.025 13.5999C12.025 13.8623 12.2376 14.0749 12.5 14.0749C12.7623 14.075 12.975 13.8623 12.975 13.6C12.975 11.72 12.4778 10.2794 11.4959 9.31166C10.7244 8.55135 9.70025 8.12903 8.50625 7.98352C10.0187 7.5474 11.125 6.15289 11.125 4.5C11.125 2.49797 9.50203 0.875 7.5 0.875ZM4.825 4.5C4.825 3.02264 6.02264 1.825 7.5 1.825C8.97736 1.825 10.175 3.02264 10.175 4.5C10.175 5.97736 8.97736 7.175 7.5 7.175C6.02264 7.175 4.825 5.97736 4.825 4.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+          <div class="space-y-1">
+            <p class="text-sm font-medium leading-none">Available</p>
+            <p class="text-sm text-muted-foreground">Only mentions and comments.</p>
+          </div>
+        </div>
+        <div class="-mx-2 flex items-start space-x-4 rounded-md p-2 transition-all hover:bg-accent hover:text-accent-foreground"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="mt-px h-5 w-5"><path d="M13.3536 2.35355C13.5488 2.15829 13.5488 1.84171 13.3536 1.64645C13.1583 1.45118 12.8417 1.45118 12.6464 1.64645L10.6828 3.61012C9.70652 3.21671 8.63759 3 7.5 3C4.30786 3 1.65639 4.70638 0.0760002 7.23501C-0.0253338 7.39715 -0.0253334 7.60288 0.0760014 7.76501C0.902945 9.08812 2.02314 10.1861 3.36061 10.9323L1.64645 12.6464C1.45118 12.8417 1.45118 13.1583 1.64645 13.3536C1.84171 13.5488 2.15829 13.5488 2.35355 13.3536L4.31723 11.3899C5.29348 11.7833 6.36241 12 7.5 12C10.6921 12 13.3436 10.2936 14.924 7.76501C15.0253 7.60288 15.0253 7.39715 14.924 7.23501C14.0971 5.9119 12.9769 4.81391 11.6394 4.06771L13.3536 2.35355ZM9.90428 4.38861C9.15332 4.1361 8.34759 4 7.5 4C4.80285 4 2.52952 5.37816 1.09622 7.50001C1.87284 8.6497 2.89609 9.58106 4.09974 10.1931L9.90428 4.38861ZM5.09572 10.6114L10.9003 4.80685C12.1039 5.41894 13.1272 6.35031 13.9038 7.50001C12.4705 9.62183 10.1971 11 7.5 11C6.65241 11 5.84668 10.8639 5.09572 10.6114Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+          <div class="space-y-1">
+            <p class="text-sm font-medium leading-none">Ignoring</p>
+            <p class="text-sm text-muted-foreground">Turn off all notifications.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  <% end %>
+<% end %>
+</div>
+<div class="w-full flex justify-center">
+<%= render_dialog do %>
+  <%= dialog_trigger do %>
+    <%= render_button("Dialog with Form", variant: :outline) %>
+  <% end %>
+  <%= dialog_content do %>
+    <div class="flex flex-col space-y-1.5 text-center sm:text-left">
+      <h2
+        id="radix-:r7m:"
+        class="text-lg font-semibold leading-none tracking-tight">
+        Edit profile
+      </h2>
+      <p
+        id="radix-:r7n:"
+        class="text-sm text-muted-foreground">
+        Make changes to your profile here. Click save when you're done.
+      </p>
+    </div>
+    <div class="grid gap-4 py-4">
+      <div class="grid grid-cols-4 items-center gap-4">
+        <label
+          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-right"
+          for="name">Name
+        </label>
+        <input
+          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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 col-span-3"
+          id="name"
+          value="Pedro Duarte">
+      </div>
+      <div class="grid grid-cols-4 items-center gap-4">
+        <label
+          class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 text-right"
+          for="username">Username
+        </label>
+        <input
+          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 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 col-span-3"
+          id="username"
+          value="@peduarte">
+      </div>
+      <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
+        <button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
+          type="submit">
+          Save changes
+        </button>
+      </div>
+    </div>
+  <% end %>
+<% end %>