shadcn-ui 0.0.1 → 0.0.2

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

@@ -0,0 +1,33 @@
+import UIDialog from "controllers/ui/dialog_controller";
+import "@kanety/stimulus-static-actions";
+
+export default class extends UIDialog {
+  // Handles a button triggering the sheet in a different
+  // controller instance
+  // REFACTOR: This is the toggle method in dialog_controller with dom elements
+  // instead of targets. Update the method there to receive dom elements and this
+  // can be refactored to use those methods instead of reimplementing.
+  toggleOutlet() {
+    const sheetTarget = document.querySelector(this.element.dataset.UiSheetOutlet);
+    const dialogTarget = sheetTarget.querySelector("[data-ui--sheet-target='dialog']");
+    const modalTarget = sheetTarget.querySelector("[data-ui--sheet-target='modal']");
+    const contentTarget = sheetTarget.querySelector("[data-ui--sheet-target='content']");
+    const visible = dialogTarget.dataset.state == "closed" ? false : true;
+    const mainTarget = document.body;
+    if (!visible) {
+      document.body.classList.add("overflow-hidden");
+      contentTarget.classList.add("overflow-y-scroll", "h-full");
+      dialogTarget.classList.remove("hidden");
+      dialogTarget.dataset.state = "open";
+      modalTarget.classList.remove("hidden");
+      modalTarget.dataset.state = "open";
+    } else {
+      document.body.classList.remove("overflow-hidden");
+      contentTarget.classList.remove("overflow-y-scroll", "h-full");
+      dialogTarget.classList.add("hidden");
+      dialogTarget.dataset.state = "closed";
+      modalTarget.classList.add("hidden");
+      modalTarget.dataset.state = "closed";
+    }
+  }
+}

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

@@ -0,0 +1,14 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class UISliderController extends Controller {
+  updateRange() {
+    const input = this.element;
+    const min = input.min;
+    const max = input.max;
+    const val = input.value;
+
+    const fillRatio = parseInt(((val - min) * 100) / (max - min));
+    input.style = `background-size: ${fillRatio}% 100%`;
+    input.setAttribute("value", fillRatio);
+  }
+}

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

@@ -1,3 +1,3 @@
-import UIHoverCardController from "./hover-card_controller";
+import UIHoverCardController from "controllers/ui/hover-card_controller";
 
 export default class UITooltipController extends UIHoverCardController {}

data/app/views/application/index.html.erb

@@ -0,0 +1,122 @@
+<div class="flex-1">
+  <div class="container relative">
+    <section class="flex max-w-[980px] flex-col items-start gap-2 pt-8 md:pt-12 pb-8">
+      <a
+        class="inline-flex items-center rounded-lg bg-muted px-3 py-1 text-sm font-medium"
+        href="/docs">🎉
+        <div
+          data-orientation="vertical"
+          role="none"
+          class="shrink-0 bg-border w-[1px] mx-2 h-4">
+        </div>
+        <span class="sm:hidden">Style, a new CLI and more.</span>
+        <span class="hidden sm:inline">Introducing shadcn/ui on Rails!</span>
+        <svg
+          width="15"
+          height="15"
+          viewBox="0 0 15 15"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          class="ml-1 h-4 w-4">
+          <path
+            d="M8.14645 3.14645C8.34171 2.95118 8.65829 2.95118 8.85355 3.14645L12.8536 7.14645C13.0488 7.34171 13.0488 7.65829 12.8536 7.85355L8.85355 11.8536C8.65829 12.0488 8.34171 12.0488 8.14645 11.8536C7.95118 11.6583 7.95118 11.3417 8.14645 11.1464L11.2929 8H2.5C2.22386 8 2 7.77614 2 7.5C2 7.22386 2.22386 7 2.5 7H11.2929L8.14645 3.85355C7.95118 3.65829 7.95118 3.34171 8.14645 3.14645Z"
+            fill="currentColor"
+            fill-rule="evenodd"
+            clip-rule="evenodd"></path>
+        </svg>
+      </a>
+      <h1 class="text-3xl font-bold leading-tight tracking-tighter md:text-5xl lg:leading-[1.1]">
+        Build your component library.
+      </h1>
+      <span
+        class="max-w-[750px] text-lg text-muted-foreground sm:text-xl"
+        data-br=":R1ir9hja:"
+        data-brr="1"
+        style="
+          display: inline-block;
+          vertical-align: top;
+          text-decoration: inherit;
+          max-width: 586px;">
+        Beautifully designed components based on <a href="https://ui.shadcn.com">shadcn/ui</a> that
+        you can copy and paste into your apps. Accessible. Customizable. Open Source.
+      </span>
+
+      <div class="flex w-full items-center space-x-4 pb-8 pt-4 md:pb-10">
+        <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 bg-primary text-primary-foreground shadow hover:bg-primary/90 h-9 px-4 py-2"
+          href="/docs">Get Started
+        </a>
+        <a
+          target="_blank"
+          rel="noreferrer"
+          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"
+          href="https://github.com/aviflombaum/shadcn-rails">
+          <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
+        </a>
+      </div>
+    </section>
+    <section class="pt-8 md:pt-12 pb-8">
+      <div className="overflow-hidden rounded-[0.5rem] border border-1 bg-background shadow">
+        <div class="flex-1 space-y-4 p-8 pt-6 rounded-[0.5rem] border border-1 bg-background shadow">
+          <div class="flex items-center justify-between space-y-2">
+            <h2 class="text-3xl font-bold tracking-tight">Dashboard</h2>
+            <div class="flex items-center space-x-2">
+              <div class="grid gap-2"><button class="inline-flex items-center rounded-md text-sm 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 w-[260px] justify-start text-left font-normal" id="date" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="radix-:r7:" data-state="closed"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2 h-4 w-4"><path d="M4.5 1C4.77614 1 5 1.22386 5 1.5V2H10V1.5C10 1.22386 10.2239 1 10.5 1C10.7761 1 11 1.22386 11 1.5V2H12.5C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H2.5C1.67157 14 1 13.3284 1 12.5V3.5C1 2.67157 1.67157 2 2.5 2H4V1.5C4 1.22386 4.22386 1 4.5 1ZM10 3V3.5C10 3.77614 10.2239 4 10.5 4C10.7761 4 11 3.77614 11 3.5V3H12.5C12.7761 3 13 3.22386 13 3.5V5H2V3.5C2 3.22386 2.22386 3 2.5 3H4V3.5C4 3.77614 4.22386 4 4.5 4C4.77614 4 5 3.77614 5 3.5V3H10ZM2 6V12.5C2 12.7761 2.22386 13 2.5 13H12.5C12.7761 13 13 12.7761 13 12.5V6H2ZM7 7.5C7 7.22386 7.22386 7 7.5 7C7.77614 7 8 7.22386 8 7.5C8 7.77614 7.77614 8 7.5 8C7.22386 8 7 7.77614 7 7.5ZM9.5 7C9.22386 7 9 7.22386 9 7.5C9 7.77614 9.22386 8 9.5 8C9.77614 8 10 7.77614 10 7.5C10 7.22386 9.77614 7 9.5 7ZM11 7.5C11 7.22386 11.2239 7 11.5 7C11.7761 7 12 7.22386 12 7.5C12 7.77614 11.7761 8 11.5 8C11.2239 8 11 7.77614 11 7.5ZM11.5 9C11.2239 9 11 9.22386 11 9.5C11 9.77614 11.2239 10 11.5 10C11.7761 10 12 9.77614 12 9.5C12 9.22386 11.7761 9 11.5 9ZM9 9.5C9 9.22386 9.22386 9 9.5 9C9.77614 9 10 9.22386 10 9.5C10 9.77614 9.77614 10 9.5 10C9.22386 10 9 9.77614 9 9.5ZM7.5 9C7.22386 9 7 9.22386 7 9.5C7 9.77614 7.22386 10 7.5 10C7.77614 10 8 9.77614 8 9.5C8 9.22386 7.77614 9 7.5 9ZM5 9.5C5 9.22386 5.22386 9 5.5 9C5.77614 9 6 9.22386 6 9.5C6 9.77614 5.77614 10 5.5 10C5.22386 10 5 9.77614 5 9.5ZM3.5 9C3.22386 9 3 9.22386 3 9.5C3 9.77614 3.22386 10 3.5 10C3.77614 10 4 9.77614 4 9.5C4 9.22386 3.77614 9 3.5 9ZM3 11.5C3 11.2239 3.22386 11 3.5 11C3.77614 11 4 11.2239 4 11.5C4 11.7761 3.77614 12 3.5 12C3.22386 12 3 11.7761 3 11.5ZM5.5 11C5.22386 11 5 11.2239 5 11.5C5 11.7761 5.22386 12 5.5 12C5.77614 12 6 11.7761 6 11.5C6 11.2239 5.77614 11 5.5 11ZM7 11.5C7 11.2239 7.22386 11 7.5 11C7.77614 11 8 11.2239 8 11.5C8 11.7761 7.77614 12 7.5 12C7.22386 12 7 11.7761 7 11.5ZM9.5 11C9.22386 11 9 11.2239 9 11.5C9 11.7761 9.22386 12 9.5 12C9.77614 12 10 11.7761 10 11.5C10 11.2239 9.77614 11 9.5 11Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>Jan 20, 2023 - Feb 09, 2023</button></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">Download</button></div>
+          </div>
+          <div dir="ltr" data-orientation="horizontal" class="space-y-4">
+            <div role="tablist" aria-orientation="horizontal" class="inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground" tabindex="0" data-orientation="horizontal" style="outline: none;"><button type="button" role="tab" aria-selected="true" aria-controls="radix-:r8:-content-overview" data-state="active" id="radix-:r8:-trigger-overview" class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Overview</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-:r8:-content-analytics" data-state="inactive" data-disabled="" disabled="" id="radix-:r8:-trigger-analytics" class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Analytics</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-:r8:-content-reports" data-state="inactive" data-disabled="" disabled="" id="radix-:r8:-trigger-reports" class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Reports</button><button type="button" role="tab" aria-selected="false" aria-controls="radix-:r8:-content-notifications" data-state="inactive" data-disabled="" disabled="" id="radix-:r8:-trigger-notifications" class="inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow" tabindex="-1" data-orientation="horizontal" data-radix-collection-item="">Notifications</button></div>
+            <div data-state="active" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-:r8:-trigger-overview" id="radix-:r8:-content-overview" tabindex="0" class="mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 space-y-4" style="">
+              <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+                <div class="rounded-xl border bg-card text-card-foreground shadow">
+                  <div class="p-6 flex flex-row items-center justify-between space-y-0 pb-2">
+                    <h3 class="tracking-tight text-sm font-medium">Total Revenue</h3>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path></svg></div>
+                  <div class="p-6 pt-0">
+                    <div class="text-2xl font-bold">$45,231.89</div>
+                    <p class="text-xs text-muted-foreground">+20.1% from last month</p>
+                  </div>
+                </div>
+                <div class="rounded-xl border bg-card text-card-foreground shadow">
+                  <div class="p-6 flex flex-row items-center justify-between space-y-0 pb-2">
+                    <h3 class="tracking-tight text-sm font-medium">Subscriptions</h3>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path><circle cx="9" cy="7" r="4"></circle><path d="M22 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"></path></svg></div>
+                  <div class="p-6 pt-0">
+                    <div class="text-2xl font-bold">+2350</div>
+                    <p class="text-xs text-muted-foreground">+180.1% from last month</p>
+                  </div>
+                </div>
+                <div class="rounded-xl border bg-card text-card-foreground shadow">
+                  <div class="p-6 flex flex-row items-center justify-between space-y-0 pb-2">
+                    <h3 class="tracking-tight text-sm font-medium">Sales</h3>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground"><rect width="20" height="14" x="2" y="5" rx="2"></rect><path d="M2 10h20"></path></svg></div>
+                  <div class="p-6 pt-0">
+                    <div class="text-2xl font-bold">+12,234</div>
+                    <p class="text-xs text-muted-foreground">+19% from last month</p>
+                  </div>
+                </div>
+                <div class="rounded-xl border bg-card text-card-foreground shadow">
+                  <div class="p-6 flex flex-row items-center justify-between space-y-0 pb-2">
+                    <h3 class="tracking-tight text-sm font-medium">Active Now</h3>
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="h-4 w-4 text-muted-foreground"><path d="M22 12h-4l-3 9L9 3l-3 9H2"></path></svg></div>
+                  <div class="p-6 pt-0">
+                    <div class="text-2xl font-bold">+573</div>
+                    <p class="text-xs text-muted-foreground">+201 since last hour</p>
+                  </div>
+                </div>
+              </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</div>

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

@@ -1,5 +1,5 @@
 <div data-controller="ui--dialog">
-  <%= render "components/ui/shared/dialog_background", as: "backdrop" %>
+  <%= render "components/ui/shared/backdrop", as: "backdrop" %>
 
   <%= trigger %>
   <div

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

@@ -1,4 +1,4 @@
-<div class="rounded-lg border bg-card text-card-foreground shadow-sm w-[350px]">
+<div class="rounded-lg border bg-card text-card-foreground shadow-sm w-[350px] <%= options[:class] %>">
   <% if title || subtitle %>
   <div class="flex flex-col space-y-1.5 p-6">
     <% if title %>
@@ -8,6 +8,6 @@
     <% end %>
   </div>
   <% end %>
-  <div class="p-0 <%= "p-6 pt-0" if !block && title  %> <%= "p-6" if !block && !title  %> "><%= body %></div>
+  <div class="p-0 <%= "p-6 pt-0" if !block && title %> <%= "p-6" if !block && !title %> "><%= body %></div>
   <% if footer %><footer class="mx-6 mb-6"><%= footer %></footer><% end %>
 </div>

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

@@ -27,11 +27,6 @@
         </svg>
       </span>
     </button>
-    <label
-      for="<%= name %>"
-      data-action="click->ui--checkbox#toggle"
-      class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
-      <%= label %>
-    </label>
+    <%= render_label name: name, label: label, data: {action: "click->ui--checkbox#toggle"} %>
   </div>
 </div>

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

@@ -1,7 +1,7 @@
 <div data-controller="ui--dialog">
   <div data-action="click->ui--dialog#open"><%= content_for(:dialog_trigger) %></div>
 
-  <%= render "components/ui/shared/dialog_background", as: "modal" %>
+  <%= render "components/ui/shared/backdrop", as: "modal" %>
 
   <div
     role="dialog"

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

@@ -0,0 +1,14 @@
+<div data-controller="ui--filter">
+<%= render_card do %>
+  <div class="flex items-center">
+    <%= content_for :filter_icon %>
+  <%= render_input name: "filter", placeholder: "Filter items...", style: :borderless, class: input_class, data: {"ui--filter-target": "source", action: "input->ui--filter#filter"} %></div>
+  <%= render_separator %>
+  <div class="<%= options[:class] %>">
+    <%= content_tag :div, role: "group" do
+      items.each do |item| %>
+        <div data-ui--filter-target="item"><%= list_item(value: item[:value], name: item[:name], selected: item[:selected]) %></div>
+      <% end
+    end %>
+  </div>
+<% end %>

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

@@ -0,0 +1,8 @@
+
+<%= text_field_tag name, value, type: type, id: id,
+              class: options[:class],
+              placeholder: options[:placeholder],
+              disabled: options[:disabled],
+              required: options[:required],
+              readonly: options[:readonly],
+              data: options[:data] %>

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

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

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

@@ -0,0 +1,5 @@
+<%= content_tag as, role: "group" do
+  items.each do |item| %>
+    <%= list_item(value: item[:value], name: item[:name], selected: item[:selected]) %>
+  <% end
+end %>

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

@@ -0,0 +1,15 @@
+<div
+  aria-valuemax="100"
+  aria-valuemin="0"
+  role="progressbar"
+  data-state="indeterminate"
+  data-max="100"
+  class="relative h-4 overflow-hidden rounded-full bg-secondary w-[60%]"
+  data-controller="ui--progress">
+
+  <div
+    data-state="indeterminate"
+    data-max="100"
+    class="h-full w-full flex-1 bg-primary "
+    style="transform: translateX(-50%)" data-ui--progress-target="progress"></div>
+</div>

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

@@ -0,0 +1,44 @@
+<div data-controller="ui--sheet" id="<%= options[:id] %>">
+  <div data-action="click->ui--sheet#open"><%= content_for(:sheet_trigger) %></div>
+
+  <%= render "components/ui/shared/backdrop", as: "modal" %>
+
+  <div
+    role="dialog"
+    data-state="closed"
+    data-ui--sheet-target="dialog"
+    class="data-[state=closed]:hidden data-[state=open]:block fixed z-50 gap-4 bg-background p-6 shadow-lg
+        transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500
+        inset-y-0 <%= options[:direction] %>-0 h-full <%= options[:width] %> border-l data-[state=closed]:slide-out-to-<%= options[:direction] %> data-[state=open]:slide-in-from-<%= options[:direction] %> sm:max-w-sm" tabindex="-1"
+    style="pointer-events: auto">
+      <div data-ui--sheet-target="content"><%= content_for(:sheet_content) %></div>
+      <button
+        data-ui--sheet-target="closeButton"
+        type="button"
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="h-4 w-4">
+          <line
+            x1="18"
+            x2="6"
+            y1="6"
+            y2="18"></line>
+          <line
+            x1="6"
+            x2="18"
+            y1="6"
+            y2="18"></line>
+        </svg>
+        <span class="sr-only">Close</span>
+      </button>
+  </div>
+</div>

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

@@ -0,0 +1 @@
+<div class="preview flex min-h-[350px] w-full justify-center p-10 items-center"><div class="flex items-center space-x-4"><div class="animate-pulse bg-muted h-12 w-12 rounded-full"></div><div class="space-y-2"><div class="animate-pulse rounded-md bg-muted h-4 w-[250px]"></div><div class="animate-pulse rounded-md bg-muted h-4 w-[200px]"></div></div></div></div>

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

@@ -0,0 +1,2 @@
+
+<input type="range" min="1" max="100" value="50" style="background-size: 50% 100%" data-controller="ui--slider" data-action="input->ui--slider#updateRange">

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

@@ -3,7 +3,7 @@
   placeholder="<%= options[:placeholder] %>"
   name="<%= name %>"
   id="<% id %>"
-  <%= options[:disabled] ? "disabled" : "" %>"
+  <%= options[:disabled] ? "disabled" : "" %>
   <%= options[:required] ? "required" : "" %>
   <%= options[:readonly] ? "readonly" : "" %>
   <%= options[:rows] ? "rows" : "" %>></textarea>

data/app/views/components/ui/shared/{_dialog_background.html.erb → _backdrop.html.erb}

@@ -1,5 +1,6 @@
   <div
     data-ui--dialog-target="<%= as %>"
+    data-ui--sheet-target="<%= as %>"
     data-state="closed"
     class="hidden fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
     style="pointer-events: auto"

data/app/views/components/ui/svg/_check.html.erb

@@ -0,0 +1,11 @@
+<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 opacity-0">

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

@@ -0,0 +1,20 @@
+# About
+
+<subtitle>Powered by amazing open source projects.</subtitle>
+
+[ui.shadcn.com](https://ui.shadcn.com) is a project by [shadcn](https://shadcn.com).
+
+[shadcn/ui on Rails](https://shadcn-ui-on-rails.avi.nyc) is a project by
+[aviflombaum](https://avi.nyc).
+
+## Credits from shadcn/ui
+
+- [Radix UI](https://radix-ui.com) - For the primitives.
+- [Vercel](https://vercel.com) - Where I host all my projects.
+- [Shu Ding](https://shud.in) - The typography style is adapted from his work on Nextra.
+- [Cal](https://cal.com) - Where I copied the styles for the first component: the `Button`.
+- [cmdk](https://cmdk.paco.me) - For the `<Command />` component.
+
+## License
+
+MIT © [shadcn](https://shadcn.com)

data/app/views/documentation/index.html.erb.bak

@@ -0,0 +1,70 @@
+<main class="relative py-6 lg:gap-10 lg:py-8 xl:grid xl:grid-cols-[1fr_300px]">
+  <div class="mx-auto w-full min-w-0">
+    <div class="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
+      <div class="overflow-hidden text-ellipsis whitespace-nowrap">Docs</div>
+      <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"><path d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
+      <div class="font-medium text-foreground">Introduction</div>
+    </div>
+    <div class="space-y-2">
+      <h1 class="scroll-m-20 text-4xl font-bold tracking-tight">Introduction</h1>
+      <p class="text-lg text-muted-foreground"><span data-br=":r1n:" data-brr="1" style="display: inline-block; vertical-align: top; text-decoration: inherit; max-width: 522px;">Re-usable components built using Radix UI and Tailwind CSS.</span><script>
+          self.__wrap_b=(e,t,r)=>{let n=(r=r||document.querySelector(`[data-br="${e}"]`)).parentElement,a=e=>r.style.maxWidth=e+"px";r.style.maxWidth="";let o=n.clientWidth,l=n.clientHeight,i=o/2-.25,s=o+.5,u;if(o){for(;i+1<s;)a(u=Math.round((i+s)/2)),n.clientHeight===l?s=u:i=u;a(s*t+o*(1-t))}r.__wrap_o||"undefined"!=typeof ResizeObserver&&(r.__wrap_o=new ResizeObserver(()=>{self.__wrap_b(0,+r.dataset.brr,r)})).observe(n)};self.__wrap_b(":r1n:",1)
+        </script></p>
+    </div>
+    <div class="pb-12 pt-8">
+      <div class="mdx">
+        <p class="leading-7 [&amp;:not(:first-child)]:mt-6">This is <strong>NOT</strong> a component library. It's a collection of re-usable components that you can copy and paste into your apps.</p>
+        <p class="leading-7 [&amp;:not(:first-child)]:mt-6"><strong>What do you mean by not a component library?</strong></p>
+        <p class="leading-7 [&amp;:not(:first-child)]:mt-6">I mean you do not install it as a dependency. It is not available or distributed via npm.</p>
+        <p class="leading-7 [&amp;:not(:first-child)]:mt-6">Pick the components you need. Copy and paste the code into your project and customize to your needs. The code is yours.</p>
+        <p class="leading-7 [&amp;:not(:first-child)]:mt-6"><em>Use this as a reference to build your own component libraries.</em></p>
+        <h2 class="font-heading mt-12 scroll-m-20 border-b pb-2 text-2xl font-semibold tracking-tight first:mt-0" id="faq"><a class="font-medium underline underline-offset-4 subheading-anchor" aria-label="Link to section" href="#faq"><span class="icon icon-link"></span></a>FAQ</h2>
+        <div data-orientation="vertical">
+          <div data-state="closed" data-orientation="vertical" class="border-b">
+            <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-:r1p:" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-:r1o:" class="flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&amp;[data-state=open]>svg]:rotate-180" data-radix-collection-item="">
+                <p class="leading-7 [&amp;:not(:first-child)]:mt-6">Why copy/paste and not packaged as a dependency?</p>
+                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></h3>
+            <div data-state="closed" id="radix-:r1p:" hidden="" role="region" aria-labelledby="radix-:r1o:" data-orientation="vertical" class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-accordion-content-width: var(--radix-collapsible-content-width);"></div>
+          </div>
+          <div data-state="closed" data-orientation="vertical" class="border-b">
+            <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-:r1r:" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-:r1q:" class="flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&amp;[data-state=open]>svg]:rotate-180" data-radix-collection-item="">
+                <p class="leading-7 [&amp;:not(:first-child)]:mt-6">Do you plan to publish it as an npm package?</p>
+                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></h3>
+            <div data-state="closed" id="radix-:r1r:" hidden="" role="region" aria-labelledby="radix-:r1q:" data-orientation="vertical" class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-accordion-content-width: var(--radix-collapsible-content-width);"></div>
+          </div>
+          <div data-state="closed" data-orientation="vertical" class="border-b">
+            <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-:r1t:" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-:r1s:" class="flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&amp;[data-state=open]>svg]:rotate-180" data-radix-collection-item="">
+                <p class="leading-7 [&amp;:not(:first-child)]:mt-6">Which frameworks are supported?</p>
+                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></h3>
+            <div data-state="closed" id="radix-:r1t:" hidden="" role="region" aria-labelledby="radix-:r1s:" data-orientation="vertical" class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-accordion-content-width: var(--radix-collapsible-content-width);"></div>
+          </div>
+          <div data-state="closed" data-orientation="vertical" class="border-b">
+            <h3 data-orientation="vertical" data-state="closed" class="flex"><button type="button" aria-controls="radix-:r1v:" aria-expanded="false" data-state="closed" data-orientation="vertical" id="radix-:r1u:" class="flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&amp;[data-state=open]>svg]:rotate-180" data-radix-collection-item="">
+                <p class="leading-7 [&amp;:not(:first-child)]:mt-6">Can I use this in my project?</p>
+                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200"><path d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></button></h3>
+            <div data-state="closed" id="radix-:r1v:" hidden="" role="region" aria-labelledby="radix-:r1u:" data-orientation="vertical" class="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down" style="--radix-accordion-content-height: var(--radix-collapsible-content-height); --radix-accordion-content-width: var(--radix-collapsible-content-width);"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="flex flex-row items-center justify-between"><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 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2 ml-auto" href="/docs/installation">Installation<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4"><path d="M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></a></div>
+  </div>
+  <div class="hidden text-sm xl:block">
+    <div class="sticky top-16 -mt-10 h-[calc(100vh-3.5rem)] overflow-hidden pt-6">
+      <div dir="ltr" class="relative overflow-hidden pb-10" style="position: relative; --radix-scroll-area-corner-width: 0px; --radix-scroll-area-corner-height: 0px;"><style>
+          [data-radix-scroll-area-viewport]{scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;}[data-radix-scroll-area-viewport]::-webkit-scrollbar{display:none}
+        </style>
+        <div data-radix-scroll-area-viewport="" class="h-full w-full rounded-[inherit]" style="overflow: hidden scroll;">
+          <div style="min-width: 100%; display: table;">
+            <div class="space-y-2">
+              <p class="font-medium">On This Page</p>
+              <ul class="m-0 list-none">
+                <li class="mt-0 pt-2"><a href="#faq" class="inline-block no-underline transition-colors hover:text-foreground text-muted-foreground">FAQ</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</main>

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

@@ -0,0 +1,15 @@
+# Introduction
+
+<subtitle>Re-usable components built using Radix UI and Tailwind CSS.</subtitle>
+
+This is **NOT** a component library. It's a collection of re-usable components that you can copy and
+paste into your apps.
+
+**What do you mean by not a component library?**
+
+I mean you do not install it as a dependency. It is not available or distributed via npm.
+
+Pick the components you need. Copy and paste the code into your project and customize to your needs.
+The code is yours.
+
+_Use this as a reference to build your own component libraries._