shadcn-ui 0.0.2 → 0.0.4

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

@@ -2,7 +2,21 @@
       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" %>
+  <%= render_code_preview('checkbox') %>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("checkbox/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 checkbox
+<% 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("checkbox/usage", :erb) %>
+
+<%= render_usage("checkbox") %>

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

@@ -0,0 +1,16 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Collapsible component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/collapsible_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_collapsible.html.erb") %></li>
+  <li><%= code("app/javascript/controllers/ui/collapsible_controller.js") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+  Collapsible introduces the <%= code("render_collapsible") %> method that accepts an argument
+  <%= code("trigger:") %> which is the text you want to show that will trigger the collapsible menu and
+  a block. Within the block of collapsible, you can call <%= code("collapsible_preview") %> to
+  define an element that is visible from the collapsible menu via a block. Similarly, you can call
+  <%= code("collapsible_body") %> and pass it a block for the elements that are hidden that will be
+  made visible when the trigger is pressed.
+</p>

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

@@ -0,0 +1,9 @@
+<%= render_collapsible trigger: "@peduarte starred 3 repositories" do %>
+  <% collapsible_preview do %>
+    <div class="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/primitives</div>
+  <% end %>
+  <% collapsible_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 %>

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

@@ -0,0 +1,7 @@
+<%= render_collapsible trigger: do %>
+  <% collapsible_preview do %>
+  <% end %>
+
+  <% collapsible_body do %>
+  <% end %>
+<% end %>

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

@@ -5,20 +5,22 @@
 
 <%= 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 %>
+  <%= render_code_preview('collapsible') %>
 </div>
 <% end %>
 
+<% content_for :code, flush: true do %>
+  <%= code_partial("collapsible/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 collapsible
+<% 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("collapsible/usage", :erb) %>
 
-<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>
+<%= render_usage("collapsible") %>

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

@@ -3,21 +3,12 @@
 
 <% content_for :preview, flush: true do %>
   <div class="w-full flex justify-center">
-    <%= render_dialog do %>
-      <%= dialog_trigger do %>
-        <%= render_button("Open Typography", variant: :outline) %>
-      <% end %>
-      <%= dialog_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('dialog') %>
   </div>
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("dialog/code/preview", :erb) %>
+  <%= code_partial("dialog/preview", :erb) %>
 <% end %>
 
 <%= render_preview %>
@@ -25,12 +16,12 @@
 <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 dialog
+rails generate shadcn_ui 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("dialog/code/usage", :erb) %>
+<%= code_partial("dialog/usage", :erb) %>
 
 <%= render_usage("dialog") %>
 
@@ -81,7 +72,7 @@ rails generate shadcn-ui dialog
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("dialog/code/notifications", :erb) %>
+  <%= code_partial("dialog/notifications", :erb) %>
 <% end %>
 
 <%= render_example %>
@@ -139,7 +130,7 @@ rails generate shadcn-ui dialog
 <% end %>
 
 <% content_for :code, flush: true do %>
-  <%= code_partial("dialog/code/form", :erb) %>
+  <%= code_partial("dialog/form", :erb) %>
 <% end %>
 
 <%= render_example %>

data/app/views/examples/components/dropdown-menu/_usage.html.erb

@@ -0,0 +1,19 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Dropdown Menu component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/dropdown_menu_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_dropdown_menu.html.erb") %></li>
+  <li><%= code("app/javascript/controllers/ui/dropdown-menu_controller.js") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+The method <%= code("render_dropdown_menu") %> defined in <%= code("app/helpers/components/dropdown_menu_helper.rb") %>
+accepts a block for the two inner components, <%= code("dropdown_menu_trigger") %> and <%= code("dropdown_menu_content") %>. Each of those accepts a block for their respective content.</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+Within the <%= code("dropdown_menu_content") %> block, you can use the following methods:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("dropdown_menu_label") %> - accepts an argument for the label section of the dropdown menu. This is optional.</li>
+  <li><%= code("dropdown_menu_item") %> - an arbitrary amount of these can be used for each menu item you want to include. This method either accepts a string or a block for the content you want.</li>
+</ul>

data/app/views/examples/components/dropdown-menu/code/_preview.erb

@@ -0,0 +1,19 @@
+<% render_dropdown_menu do %>
+  <%= dropdown_menu_trigger do %>
+    <%= render_button "Open Dropdown", variant: :outline %>
+  <% end %>
+
+  <%= dropdown_menu_content do %>
+    <%= dropdown_menu_label "My Account" %>
+    <%= render_separator class: "my-1" %>
+    <%= dropdown_menu_item "Profile" %>
+    <%= dropdown_menu_item  do %>
+      <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="mr-2 h-4 w-4">
+        <rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line>
+      </svg>
+      <span>Billing</span>
+      <span class="ml-auto text-xs tracking-widest opacity-60">⌘B</span>
+    <% end %>
+    <%= dropdown_menu_item "Settings" %>
+  <% end %>
+<% end %>

data/app/views/examples/components/dropdown-menu/code/_usage.erb

@@ -0,0 +1,13 @@
+<% render_dropdown_menu do %>
+  <%= dropdown_menu_trigger do %>
+  <% end %>
+
+  <%= dropdown_menu_content do %>
+    <%= dropdown_menu_label %>
+
+    <%= dropdown_menu_item %>
+    <%= dropdown_menu_item do %>
+    <% end %>
+    <%= dropdown_menu_item %>
+  <% end %>
+<% end %>

data/app/views/examples/components/dropdown-menu.html.erb

@@ -3,24 +3,38 @@
 
 <%= content_for :preview, flush: true do %>
   <% render_dropdown_menu do %>
-      <%= dropdown_menu_trigger do %>
-        <%= render_button "Open Dropdown", variant: :outline %>
-      <% end %>
+    <%= dropdown_menu_trigger do %>
+      <%= render_button "Open Dropdown", variant: :outline %>
+    <% end %>
 
-      <%= dropdown_menu_content do %>
-        <%= dropdown_menu_label "My Account" %>
-        <%= render_separator class: "my-1" %>
-        <%= dropdown_menu_item "Profile" %>
-        <%= dropdown_menu_item  do %>
-          <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="mr-2 h-4 w-4">
-            <rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line>
-          </svg>
-          <span>Billing</span>
-          <span class="ml-auto text-xs tracking-widest opacity-60">⌘B</span>
-        <% end %>
-        <%= dropdown_menu_item "Settings" %>
+    <%= dropdown_menu_content do %>
+      <%= dropdown_menu_label "My Account" %>
+      <%= render_separator class: "my-1" %>
+      <%= dropdown_menu_item "Profile" %>
+      <%= dropdown_menu_item  do %>
+        <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="mr-2 h-4 w-4">
+          <rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line>
+        </svg>
+        <span>Billing</span>
+        <span class="ml-auto text-xs tracking-widest opacity-60">⌘B</span>
       <% end %>
+      <%= dropdown_menu_item "Settings" %>
     <% end %>
+  <% end %>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("dropdown-menu/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 dropdown-menu
+<% 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("dropdown-menu/usage", :erb) %>
+
+<%= render_usage("dropdown-menu") %>

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

@@ -0,0 +1,14 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Filter component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/filter_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_filter.html.erb") %></li>
+  <li><%= code("app/javascript/controllers/ui/filter_controller.js") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+The method <%= code("render_filter") %> method accepts one mandtory argument, an array of hashes that each have a <%= code("value") %> and name <%= code("name") %>.</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">You can optionally also call <%= code("filter_icon") %> within a block passed to <%= code("render_filter") %> to render an icon to the left of the filter input.</p>
+
+<p>This component gets used in the Combobox and Command components as well as potentially others.</p>

data/app/views/examples/components/filter/code/_icon.html.erb

@@ -0,0 +1,7 @@
+<% items = [{:value => "Ruby on Rails", name: "Ruby on Rails"}, {:value => "Next.js", name: "Next.js"}, {:value => "Remix.run", name: "Remix.run"}] %>
+
+<%= render_filter items, class: "p-1" do %>
+  <%= filter_icon do %>
+    <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="mr-2 h-4 w-4 shrink-0 opacity-50 ml-2"><circle cx="11" cy="11" r="8"></circle><line x1="21" x2="16.65" y1="21" y2="16.65"></line></svg>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,3 @@
+<% items = [{:value => "Ruby on Rails", name: "Ruby on Rails"}, {:value => "Next.js", name: "Next.js"}, {:value => "Remix.run", name: "Remix.run"}] %>
+
+<%= render_filter items %>

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

@@ -0,0 +1,5 @@
+<%= render_filter items do %>
+  <%# Optional  %>
+  <%= filter_icon do %>
+  <% end %>
+<% end >

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

@@ -5,21 +5,41 @@
 <%= render_component_header title: "Filter",
       description: "Displays a list that is filterable via the included input." %>
 
-<% content_for :preview, flush: true do %>
-  <div class="w-full flex justify-center">
-  <%= render_filter items, class: "p-1" do %>
-    <%= filter_icon do %>
-      <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="mr-2 h-4 w-4 shrink-0 opacity-50 ml-2"><circle cx="11" cy="11" r="8"></circle><line x1="21" x2="16.65" y1="21" y2="16.65"></line></svg>
-    <% end %>
-  <% end %>
+<%= content_for :preview, flush: true do %>
+<div class="w-full flex justify-center">
+  <%= render_code_preview('filter') %>
+</div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("filter/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 filter
+<% 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("filter/usage", :erb) %>
+
+<%= render_usage("filter") %>
+
 <% content_for :examples, flush: true do %>
   <div class="w-full flex justify-center">
   <%= render_filter items, class: "p-1" do %>
+    <%= filter_icon do %>
+      <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="mr-2 h-4 w-4 shrink-0 opacity-50 ml-2"><circle cx="11" cy="11" r="8"></circle><line x1="21" x2="16.65" y1="21" y2="16.65"></line></svg>
+    <% end %>
   <% end %>
+  </div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("filter/icon.html", :erb) %>
 <% end %>
 
+
 <%= render_example %>

data/app/views/examples/components/hover-card/_usage.html.erb

@@ -0,0 +1,15 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Hover Card component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/hover_card_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_hover_card.html.erb") %></li>
+  <li><%= code("app/javascript/controllers/ui/hover-card_controller.js") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+The method <%= code("render_hover_card") %> defined in <%= code("app/helpers/components/hover_card_helper.rb") %>
+accepts a block for the two inner components, <%= code("hover_card_trigger") %> and <%= code("hover_card_content") %>. Each of those accepts a block for their respective content.
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+<%= code("app/javascript/controllers/ui/hover-card_controller.js") %> is a stimulus controller that provides
+the functionality of the popover.</p>

data/app/views/examples/components/hover-card/code/_preview.erb

@@ -0,0 +1,13 @@
+<%= render_hover_card do %>
+  <%= hover_card_trigger do %>
+    <%= content_tag :span, "@rails" %>
+  <% end %>
+  <%= hover_card_content do %>
+    <div class="grid gap-2">
+      <div class="space-y-2">
+        <h4 class="font-medium leading-none">Ruby on Rails</h4>
+        <p class="text-sm text-muted-foreground">The Web framework that changed the world.</p>
+      </div>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,6 @@
+<%= render_hover_card do %>
+  <%= hover_card_trigger do %>
+  <% end %>
+  <%= hover_card_content do %>
+  <% end %>
+<% end %>

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

@@ -2,23 +2,21 @@
       description: "For sighted users to preview content available behind a link." %>
 
 <% content_for :preview, flush: true do %>
-  <%= render_hover_card do %>
-    <%= hover_card_trigger do %>
-      <%= content_tag :span, "@rails" %>
-    <% end %>
-    <%= hover_card_content do %>
-      <div class="grid gap-2">
-        <div class="space-y-2">
-          <h4 class="font-medium leading-none">Ruby on Rails</h4>
-          <p class="text-sm text-muted-foreground">The Web framework that changed the world.</p>
-        </div>
-      </div>
-    <% end %>
-  <% end %>
+  <%= render_code_preview('hover-card') %>
 <% end %>
 
 <% content_for :code, flush: true do %>
-
+  <%= code_partial("hover-card/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 hover-card
+<% 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("hover-card/usage", :erb) %>
+
+<%= render_usage("hover-card") %>

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

@@ -0,0 +1,10 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Input component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/input_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_input.html.erb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+  <%= code("render_input") %> accepts a <%= code("name:") %> argument for the name of the text field along with optional <%= code("id:") %> and <%= code("variant:") %> (only supporting <%= code(":borderless") %> currently)
+<p>

data/app/views/examples/components/input/code/_borderless.erb

@@ -0,0 +1,3 @@
+  <%= render_input name: "sample_input",
+                   id: "sample_input",
+                   variant: :borderless %>

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

@@ -0,0 +1 @@
+  <%= render_input name: "sample_input", id: "sample_input" %>

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

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

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

@@ -2,17 +2,31 @@
       description: "Displays a form input field or a component that looks like an input field." %>
 
 <% content_for :preview, flush: true do %>
-  <%= render_input name: "sample_input", id: "sample_input" %>
+<div class="w-full flex justify-center">
+  <%= render_code_preview('input') %>
+</div>
 <% end %>
 
 <% content_for :code, flush: true do %>
-
+  <%= code_partial("input/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 input
+<% 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("input/usage", :erb) %>
+
 <%= content_for :examples, flush: true do %>
-  <%= render_input name: "sample_input", id: "sample_input", style: :borderless %>
+  <%= render_input name: "sample_input", id: "sample_input", variant: :borderless %>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("input/borderless", :erb) %>
 <% end %>
 
 <%= render_example %>

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

@@ -0,0 +1,9 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Label component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/label_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_label.html.erb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+The method <%= code("render_label") %> defined in <%= code("app/helpers/components/label_helper.rb") %> accepts two keyword arguments, <%= code("name") %> and <%= code("label") %>. The <%= code("name") %> argument is used to generate the <%= code("for") %> attributes. The <%= code("label") %> argument is used as the text for the label.</p>

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

@@ -0,0 +1,5 @@
+<%= render_label name: "sample_input",
+                 label: "Sample Input",
+                 class: "block text-left w-full" %>
+
+<%= render_input name: "sample_input", id: "sample_input" %>

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

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

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

@@ -1,13 +1,22 @@
-<%= render_component_header title: "Input",
-      description: "Displays a form input field or a component that looks like an input field." %>
+<%= render_component_header title: "Label",
+      description: "Displays a clickable label that will focus the associated form field." %>
 
 <% content_for :preview, flush: true do %>
-  <%= render_label name: "sample_input", label: "Sample Input", class: "block text-left w-full" %>
-  <%= render_input name: "sample_input", id: "sample_input" %>
+  <%= render_code_preview('label') %>
 <% end %>
 
 <% content_for :code, flush: true do %>
-
+  <%= code_partial("label/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 label
+<% 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("label/usage", :erb) %>
+
+<%= render_usage("label") %>

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

@@ -0,0 +1,12 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Popover component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/popover_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_popover.html.erb") %></li>
+  <li><%= code("app/javascript/controllers/ui/popover_controller.js") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+  <%= code("render_popover") %> accepts a block where you call <%= code("popover_trigger") %>, whose block will be the element that triggers the popover and
+  <%= code("popover_content") %> whose block will be the content of the popover.
+<p>

data/app/views/examples/components/popover/code/_form.erb

@@ -0,0 +1,23 @@
+<%= 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 %>

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

@@ -0,0 +1,13 @@
+<%= 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">Heading</h4>
+        <p class="text-sm text-muted-foreground">Popovers stay open until you click the button or anywhere else on the document. </p>
+      </div>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,7 @@
+<%= render_popover do %>
+  <%= popover_trigger do %>
+  <% end %>
+
+  <%= popover_content do %>
+  <% end %>
+<% end %>