shadcn-ui 0.0.2 → 0.0.4

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

@@ -2,33 +2,37 @@
       description: "Displays rich content in a portal, triggered by a button." %>
 
 <% content_for :preview, flush: true do %>
-  <%= render_popover do %>
-    <%= popover_trigger do %>
-      <%= render_button "Open Popover", variant: :outline %>
-    <% end %>
-    <%= popover_content do %>
-      <div class="grid gap-4">
-        <div class="space-y-2">
-          <h4 class="font-medium leading-none">Dimensions</h4>
-          <p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
-        </div>
-        <div class="grid gap-2">
-          <div class="grid grid-cols-3 items-center gap-4">
-            <label
-              class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-              for="width">Width</label><input
-              class="flex 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-2 h-8"
-              id="width"
-              value="100%">
-          </div>
-        </div>
-      </div>
-    <% end %>
-  <% end %>
+<div class="w-full flex justify-center">
+  <%= render_code_preview('popover') %>
+</div>
 <% end %>
 
 <% content_for :code, flush: true do %>
-
+<div class="w-full flex justify-center">
+  <%= code_partial("popover/preview", :erb) %>
+</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>
+<%= code_sample(language: "sh") do %>
+  rails generate shadcn-ui popover
+<% 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("popover/usage", :erb) %>
+
+<%= render_usage("popover") %>
+
+<% content_for :examples, flush: true do %>
+  <div class="w-full flex justify-center">
+    <%= render "examples/components/popover/code/form" %>
+  </div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("popover/form", :erb) %>
+<% end %>
+
+<%= render_example %>

data/app/views/examples/components/progress/_usage.erb

@@ -0,0 +1,9 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Progress component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/progress_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_progress.html.erb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+The method <%= code("render_progress") %> defined in <%= code("app/helpers/components/progress_helper.rb") %> accepts one keyword arguments for the percentage of the progress bar.</p>

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

@@ -0,0 +1 @@
+<%= render_progress value: 37 %>

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

@@ -0,0 +1 @@
+<%= render_progress value: %>

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

@@ -2,11 +2,21 @@
       description: "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar." %>
 
 <% content_for :preview, flush: true do %>
-  <%= render_progress value: 37 %>
+  <%= render_code_preview('progress') %>
 <% end %>
 
 <% content_for :code, flush: true do %>
-
+  <%= code_partial("progress/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 progress
+<% 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("progress/usage", :erb) %>
+
+<%= render_usage("progress") %>

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

@@ -0,0 +1,10 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Seperator component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/seperator_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_seperator.html.erb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+  <%= code("render_seperator") %> will render a seperator.
+  <p>

data/app/views/examples/components/separator/code/_fancy.erb

@@ -0,0 +1,21 @@
+<div>
+  <div class="space-y-1">
+    <h4 class="text-sm font-medium leading-none">Shadcn on Rails</h4>
+  </div>
+
+  <%= render_separator class: "my-4" %>
+
+  <div class="flex h-5 items-center space-x-4 text-sm">
+    <div>Blog</div>
+    <div
+      data-orientation="vertical"
+      role="none"
+      class="shrink-0 bg-border h-full w-[1px]"></div>
+    <div>Docs</div>
+    <div
+      data-orientation="vertical"
+      role="none"
+      class="shrink-0 bg-border h-full w-[1px]"></div>
+    <div>Source</div>
+  </div>
+</div>

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

@@ -0,0 +1 @@
+<%= render_separator class: "my-4" %>

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

@@ -0,0 +1 @@
+<%= render_separator %>

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

@@ -1,33 +1,40 @@
 <!--prettier-ignore-->
 
 <%= render "layouts/documentation/component_header",
-  title: "Seperator",
+  title: "Separator",
   description: "Visually or semantically separates content." %>
 <%= content_for :preview, flush: true do %>
-<div>
-  <div class="space-y-1">
-    <h4 class="text-sm font-medium leading-none">Radix Primitives</h4>
-    <p class="text-sm text-muted-foreground">An open-source UI component library.</p>
-  </div>
-  <%= render_separator class: "my-4" %>
-  <div class="flex h-5 items-center space-x-4 text-sm">
-    <div>Blog</div>
-    <div
-      data-orientation="vertical"
-      role="none"
-      class="shrink-0 bg-border h-full w-[1px]"></div>
-    <div>Docs</div>
-    <div
-      data-orientation="vertical"
-      role="none"
-      class="shrink-0 bg-border h-full w-[1px]"></div>
-    <div>Source</div>
+  <div class="w-full flex justify-center">
+    <%= render_code_preview('separator') %>
   </div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+<div class="w-full flex justify-center">
+  <%= code_partial("separator/preview", :erb) %>
 </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>
+<%= code_sample(language: "sh") do %>
+  rails generate shadcn-ui separator
+<% 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("separator/usage", :erb) %>
+
+<%= render_usage("separator") %>
+
+<% content_for :examples, flush: true do %>
+  <div class="w-full flex justify-center">
+    <%= render "examples/components/separator/code/fancy" %>
+  </div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("separator/fancy", :erb) %>
+<% end %>
+
+<%= render_example %>

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

@@ -0,0 +1,38 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Sheet component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/sheet_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_sheet.html.erb") %></li>
+  <li><%= code("app/javascript/controllers//ui/sheet_controller.js") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+  The <%= code("render_sheet") %> method accepts a <%= code("direction") %> optional keyword for the direction for the sheet, left (default) or right.
+
+  The <%= code("render_sheet") %> method also accepts a block where you call the <%= code("sheet_trigger") %> and pass it a block that will be the trigger for the sheet and
+  a <%= code("sheet_content") %> method that accepts a block for the content of a sheet.
+</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+  If you have to define a sheet whose trigger cannot be within the same elements of the sheet content, you can interact with the sheet controller directly.
+</p>
+
+<% content_for :examples, flush: true do %>
+  <button
+    type="button"
+    data-state="closed"
+    data-controller="ui--sheet"
+    data-action="click->ui--sheet#toggleOutlet"
+    data--ui-sheet-outlet="#sidebar_sheet">Open Mobile Menu</button>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <div class="w-full flex justify-center">
+    <%= code_partial("sheet/mobile_menu", :erb) %>
+  </div>
+<% end %>
+
+<%= render_example %>
+
+In the above example the "Open Mobile Menu" button is triggering the sheet whose element matches <%= code("#sidebar_sheet") %>. It does this by calling
+<%= code("click->ui--sheet#toggleOutlet") %>, the <%= code("toggleOutlet") %> method in the sheet controller. The #sidebar_sheet element can be anywhere.

data/app/views/examples/components/sheet/code/_mobile_menu.erb

@@ -0,0 +1,17 @@
+<button
+  type="button"
+  data-state="closed"
+  data-controller="ui--sheet"
+  data-action="click->ui--sheet#toggleOutlet"
+  data--ui-sheet-outlet="#sidebar_sheet">
+    Open Mobile Menu
+</button>
+
+
+<%= render_sheet id: "sidebar_sheet", direction: "left" do %>
+  <div class=" h-full">
+  <%= sheet_content do %>
+    <!-- Mobile Menu -->
+  <% end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,22 @@
+<%= render_sheet direction: "right" do %>
+  <%= sheet_trigger do %>
+    <%= render_button("Open Sidebar", variant: :outline) %>
+  <% end %>
+  <%= sheet_content do %>
+    <h2 class="mt-10 scroll-m-20 border-b pb-2 text-3xl
+              font-semibold tracking-tight transition-colors first:mt-0">
+      The King's Plan
+    </h2>
+    <p class="leading-7 [&:not(:first-child)]:mt-6">
+      The king thought long and hard, and finally came up with
+      <a href="#" class="font-medium text-primary underline underline-offset-4">
+        a brilliant plan
+      </a>:
+      he would tax the jokes in the kingdom.
+    </p>
+    <blockquote class="mt-6 border-l-2 pl-6 italic">
+      "After all," he said, "everyone enjoys a good joke,
+      so it's only fair that they should pay for the privilege."
+    </blockquote>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,7 @@
+<%= render_sheet direction: "right" do %>
+  <%= sheet_trigger do %>
+  <% end %>
+
+  <%= sheet_content do %>
+  <% end %>
+<% end %>

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

@@ -3,17 +3,24 @@
 
 <% content_for :preview, flush: true do %>
   <div class="w-full flex justify-center">
-    <%= render_sheet direction: "right" do %>
-      <%= sheet_trigger do %>
-        <%= render_button("Open Sidebar", variant: :outline) %>
-      <% end %>
-      <%= sheet_content do %>
-        <h2 class="mt-10 scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">The King's Plan</h2>
-        <p class="leading-7 [&:not(:first-child)]:mt-6">The king thought long and hard, and finally came up with <a href="#" class="font-medium text-primary underline underline-offset-4">a brilliant plan</a>: he would tax the jokes in the kingdom.</p>
-        <blockquote class="mt-6 border-l-2 pl-6 italic">"After all," he said, "everyone enjoys a good joke, so it's only fair that they should pay for the privilege."</blockquote>
-      <% end %>
-    <% end %>
+    <%= render_code_preview('sheet') %>
   </div>
 <% end %>
 
+<% content_for :code, flush: true do %>
+<div class="w-full flex justify-center">
+  <%= code_partial("sheet/preview", :erb) %>
+</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>
+<%= code_sample(language: "sh") do %>
+  rails generate shadcn-ui sheet
+<% 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("sheet/usage", :erb) %>
+
+<%= render_usage("sheet") %>

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

@@ -0,0 +1,9 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Skeleton component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/skeleton_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_skeleton.html.erb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+<%= code("render_skeleton") %> will output the skeleton component.</p>

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

@@ -0,0 +1 @@
+<%= render_skeleton %>

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

@@ -0,0 +1 @@
+<%= render_skeleton %>

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

@@ -2,11 +2,25 @@
       description: "Use to show a placeholder while content is loading." %>
 
 <% content_for :preview, flush: true do %>
-  <%= render_skeleton %>
+  <div class="w-full flex justify-center">
+    <%= render_code_preview('skeleton') %>
+  </div>
 <% end %>
 
 <% content_for :code, flush: true do %>
-
+<div class="w-full flex justify-center">
+  <%= code_partial("skeleton/preview", :erb) %>
+</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>
+<%= code_sample(language: "sh") do %>
+  rails generate shadcn-ui skeleton
+<% 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("skeleton/usage", :erb) %>
+
+<%= render_usage("skeleton") %>

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

@@ -0,0 +1,11 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Slider component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/slider_helper.rb") %></li>
+  <li><%= code("app/javascript/controllers/ui/slider_controller.js") %></li>
+  <li><%= code("app/views/components/ui/_slider.html.erb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+<%= code("render_slider") %> accepts one keyword argument for the <%= code("name") %> of the slider element. It optionally accepts a <%= code("value") %> keyword for the starting value of the slider.
+The javascript controller is responsible for maintaining the state and visual of the slider from the underlying range input.</p>

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

@@ -0,0 +1,3 @@
+<%= render_slider name: "sample_slider",
+                  id: "sample_slider",
+                  value: 23 %>

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

@@ -0,0 +1 @@
+<%= render_slider name: %>

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

@@ -2,11 +2,25 @@
       description: "An input where the user selects a value from within a given range." %>
 
 <% content_for :preview, flush: true do %>
-  <%= render_slider name: "sample_slider", id: "sample_slider", value: 23 %>
+  <div class="w-full flex justify-center">
+    <%= render_code_preview('slider') %>
+  </div>
 <% end %>
 
 <% content_for :code, flush: true do %>
-
+<div class="w-full flex justify-center">
+  <%= code_partial("slider/preview", :erb) %>
+</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>
+<%= code_sample(language: "sh") do %>
+  rails generate shadcn-ui slider
+<% 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("slider/usage", :erb) %>
+
+<%= render_usage("slider") %>

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

@@ -0,0 +1,9 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Textarea component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/textarea_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_textarea.html.erb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+<%= code("render_textarea") %> accepts one keyword argument for the <%= code("name") %> of the textarea element.</p>

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

@@ -0,0 +1 @@
+<%= render_textarea name: "sample_textarea" %>

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

@@ -0,0 +1 @@
+<%= render_textarea name: %>

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

@@ -2,11 +2,25 @@
       description: "Displays a form textarea or a component that looks like a textarea." %>
 
 <% content_for :preview, flush: true do %>
-  <%= render_textarea name: "sample_textarea" %>
+  <div class="w-full flex justify-center">
+    <%= render_code_preview('textarea') %>
+  </div>
 <% end %>
 
 <% content_for :code, flush: true do %>
-
+<div class="w-full flex justify-center">
+  <%= code_partial("textarea/preview", :erb) %>
+</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>
+<%= code_sample(language: "sh") do %>
+  rails generate shadcn-ui textarea
+<% 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("textarea/usage", :erb) %>
+
+<%= render_usage("textarea") %>

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

@@ -0,0 +1,11 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Toast component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/toast_helper.rb") %></li>
+  <li><%= code("app/javascript/controllers/ui/toast_controller.js") %></li>
+  <li><%= code("app/views/components/ui/_toast.html.erb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+<%= code("render_toast") %> accepts two keyword arguments, one for the <%= code("header") %> and the second for the <%= code("description") %>
+or body of the toast. An optional 3rd argument can be provided for an <%= code("action") %> element like a button.</p>

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

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

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

@@ -0,0 +1,2 @@
+  <%= render_toast header: ,
+                   description: %>

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

@@ -3,13 +3,21 @@
 
 <% content_for :preview, flush: true do %>
   <%= render_button "Trigger Toast", variant: "outline", data: {controller: "ui--toast", action: "ui--toast#test"} %>
-  <%= render_toast header: "Scheduled: Catch up",
-    description: "Friday, February 10, 2023 at 5:57 PM",
-    action: render_button("Undo", variant: :outline) %>
+  <%= render_code_preview('toast') %>
 <% end %>
 
 <% content_for :code, flush: true do %>
-
+  <%= code_partial("toast/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 toast
+<% 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("toast/usage", :erb) %>
+
+<%= render_usage("toast") %>

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

@@ -0,0 +1,10 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Toggle component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/toggle_helper.rb") %></li>
+  <li><%= code("app/javascript/controllers/ui/toggle_controller.js") %></li>
+  <li><%= code("app/views/components/ui/_toggle.html.erb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+<%= code("render_toggle") %> an argument for the content for the button that will become a toggle.</p>

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

@@ -0,0 +1 @@
+<%= render_toggle "𝐁" %>

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

@@ -0,0 +1 @@
+  <%= render_toggle 'content' %>

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

@@ -2,11 +2,25 @@
       description: "A two-state button that can be either on or off." %>
 
 <% content_for :preview, flush: true do %>
-  <%= render_toggle "𝐁" %>
+<div class="w-full flex justify-center">
+  <%= render_code_preview('toggle') %>
+</div>
 <% end %>
 
 <% content_for :code, flush: true do %>
-
+<div class="w-full flex justify-center">
+  <%= code_partial("toggle/preview", :erb) %>
+</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>
+<%= code_sample(language: "sh") do %>
+  rails generate shadcn-ui toggle
+<% 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("toggle/usage", :erb) %>
+
+<%= render_usage("toggle") %>

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

@@ -0,0 +1,11 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Tooltip component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/tooltip_helper.rb") %></li>
+  <li><%= code("app/javascript/controllers/ui/tooltip_controller.js") %></li>
+  <li><%= code("app/views/components/ui/_tooltip.html.erb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+<%= code("render_tooltip") %> accepts a block that contains calls to <%= code("tooltip_trigger") %> and <%= code("tooltip_content") %> each accepting a block for their respective content.
+The <%= code("tooltip_trigger") %> is the element that upon hovering over, will reveal the <%= code("tooltip_content") %>.

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

@@ -0,0 +1,12 @@
+<%= render_tooltip do %>
+  <%= tooltip_trigger do %>
+    <%= render_button "Hover", variant: :outline %>
+  <% end %>
+  <%= tooltip_content do %>
+    <div class="grid gap-2">
+      <div class="space-y-2">
+        <p class="text-sm text-muted-foreground">More will be revealed.</p>
+      </div>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,7 @@
+<%= render_tooltip do %>
+  <%= tooltip_trigger do %>
+  <% end %>
+
+  <%= tooltip_content do %>
+  <% end %>
+<% end %>