shadcn-ui 0.0.3 → 0.0.4

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 %>

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 %>