shadcn-ui 0.0.4 → 0.0.8

data/app/views/examples/components/alert-dialog/code/_usage.erb

@@ -0,0 +1,13 @@
+<%= render_alert_dialog do %>
+  <%= alert_dialog_trigger do %>
+  <% end %>
+
+  <%= alert_dialog_content do %>
+  <% end %>
+
+  <%= alert_dialog_cancel do %>
+  <% end %>
+
+  <%= alert_dialog_continue do %>
+  <% end %>
+<% end %>

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

@@ -15,7 +15,13 @@
 
 <%= 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 alert-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("alert-dialog/usage", :erb) %>
+
+<%= render_usage("alert-dialog") %>

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

@@ -1,3 +1,3 @@
-<%= render(title: nil, subtitle: nil, body: nil, footer: nil:) do %>
+<%= render_card(title: nil, subtitle: nil, body: nil, footer: nil:) do %>
   <!-- Optional Body Block -->
 <% end %>

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

@@ -0,0 +1,11 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Combobox component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/combobox_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_combobox.html.erb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+The method <%= code("render_combobox") %> 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">This componnet is the combination of a popover and a filter.</p>

data/app/views/examples/components/combobox/code/_preview.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_combobox items do %>
+  <%= combobox_trigger do %>
+    Select framework
+  <% end %>
+<% end %>

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

@@ -0,0 +1,4 @@
+<%= render_combobox [{name:, value:}] do %>
+  <%= combobox_trigger do %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,27 @@
+<%= render "layouts/documentation/component_header",
+  title: "Combobox",
+  description: "" %>
+
+<% content_for :preview, flush: true do %>
+<div class="w-full flex justify-center">
+  <%= render_code_preview('combobox') %>
+</div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+<div class="w-full flex justify-center">
+  <%= code_partial("combobox/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 combobox
+<% 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("combobox/usage", :erb) %>
+
+<%= render_usage("combobox") %>

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

@@ -0,0 +1,28 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Forms component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/form_builders/shadcn_form_builder.rb") %></li>
+  <li><%= code("app/helpers/components/forms_helper.rb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+  The <code>ShadcnFormBuilder</code> is a custom form builder that extends the
+  <code>FormBuilder</code> class. It adds the following methods that provide the form with inputs and controls:
+<p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("label") %></li>
+  <li><%= code("text_field") %></li>
+  <li><%= code("password_field") %></li>
+  <li><%= code("email_field") %></li>
+</ul>
+</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+  To use these methods which generate the styled, ActiveModel backed form, you use the <%= code("render_form_for") %> or <%= code("render_form_with") %> methods provided by <%= code("app/helpers/components/forms_helper.rb") %>.
+  These methods yield the common <code>FormBuilder</code> instance that you can use to generate the controls and inputs above.
+</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+  If a form field or attribute fails validation, its label and input will be given an <code>error</code> class to allow for styling. The default <code>error</code> style is defined in <%= code("app/assets/stylesheets/shadcn.css") %>
+</p>

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

@@ -0,0 +1,13 @@
+<%= render_form_for(@user, class: "w-full") do |form| %>
+  <div class="grid grid-cols-3 items-baseline mb-4">
+    <%= form.label :email, class: "text-right mr-4 text-lg" %>
+    <%= form.text_field :email, class: "col-span-2" %>
+  </div>
+  <div class="grid grid-cols-3 items-baseline">
+    <%= form.label :password, class: "text-right mr-4 text-lg" %>
+    <%= form.password_field :password, class: "col-span-2 mb-8" %>
+  </div>
+  <div class="flex justify-center">
+    <%= form.submit "Create Account" %>
+  </div>
+<% end %>

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

@@ -0,0 +1,6 @@
+<%= render_form_for() do |form| %>
+  <%= form.label :email %>
+  <%= form.text_field  %>
+  <%= form.password_field %>
+  <%= form.submit "Submit" %>
+<% end %>

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

@@ -0,0 +1,23 @@
+<%= render_component_header title: "Forms",
+      description: "Creates an ActiveModel backed form with error " %>
+
+<% content_for :preview, flush: true do %>
+<div class="w-full flex justify-center">
+  <%= render_code_preview('forms') %>
+</div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("forms/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 forms
+<% 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("forms/usage", :erb) %>
+<%= render_usage("forms") %>

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

@@ -1,3 +1,4 @@
 <%= render_slider name: "sample_slider",
                   id: "sample_slider",
-                  value: 23 %>
+                  value: 23,
+                  class: "w-full" %>

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

@@ -0,0 +1,11 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Switch component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/switch_helper.rb") %></li>
+  <li><%= code("app/javascript/controllers/ui/switch_controller.js") %></li>
+  <li><%= code("app/views/components/ui/_switch.html.erb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+<%= code("render_switch") %> accepts one argument for the text near the switch and two keyword arguments for the <%= code("id") %> of the button and <%= code("name") %> of the hidden input element used to pass the form value of the state. It optionally accepts a <%= code("state") %> keyword for the starting value of the switch.
+The javascript controller is responsible for the toggle effect by changing the <%= code("data-state") %> of the underlying elements.</p>

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

@@ -0,0 +1,4 @@
+<%= render_switch "Ruby on Rails",
+      id: "ruby_on_rails",
+      name: "language"
+%>

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

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

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

@@ -0,0 +1,27 @@
+<%= render "layouts/documentation/component_header",
+  title: "Switch",
+  description: "" %>
+
+<% content_for :preview, flush: true do %>
+<div class="w-full flex justify-center">
+  <%= render_code_preview('switch') %>
+</div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+<div class="w-full flex justify-center">
+  <%= code_partial("switch/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 switch
+<% 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("switch/usage", :erb) %>
+
+<%= render_usage("switch") %>

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

@@ -0,0 +1,15 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Tabs component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/tabs_helper.rb") %></li>
+  <li><%= code("app/javascript/controllers/ui/tabs_controllers.rb") %></li>
+  <li><%= code("app/views/components/ui/_tabs.html.erb") %></li>
+  <li><%= code("app/views/components/ui/tabs/_tab.html.erb") %></li>
+  <li><%= code("app/views/components/ui/tabs/_panel.html.erb") %></li>
+</ul>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+  <%= code("render_tabs") %> accepts two key blocks, <%= code("tab_list") %> and <%= code("tab_panel") %>.
+  Within <%= code("tab_list") %> call <%= code("tab") %> for each tab, accepting the text you want for the tab and making one of them <%= code("active: true") %> to determine the starting active state of the tab.
+  Within <%= code("tab_panel") %> call <%= code("tab_panel") %> for each tab panel, accepting a block for the content of the panel and making one of them <%= code("active: true") %> to determine the starting active state of the panels (generally corresponding to the active tab).
+</p>

data/app/views/examples/components/tabs/code/_account.html.erb

@@ -0,0 +1,32 @@
+<div class="rounded-lg border bg-card text-card-foreground shadow-sm">
+  <div class="flex flex-col space-y-1.5 p-6">
+    <h3 class="text-2xl font-semibold leading-none tracking-tight">Account</h3>
+    <p class="text-sm text-muted-foreground">
+      Make changes to your account here. Click save when you're done.
+    </p>
+  </div>
+  <div class="p-6 pt-0 space-y-2">
+    <div class="space-y-1">
+      <label
+        class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        for="name">Name</label><input
+        class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+        id="name"
+        value="Avi Flombaum">
+    </div>
+    <div class="space-y-1">
+      <label
+        class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        for="username">Username</label><input
+        class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+        id="username"
+        value="@aviflombaum">
+    </div>
+  </div>
+  <div class="flex items-center p-6 pt-0">
+    <button
+      class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">
+      Save changes
+    </button>
+  </div>
+</div>

data/app/views/examples/components/tabs/code/_password.html.erb

@@ -0,0 +1,19 @@
+<div class="rounded-lg border bg-card text-card-foreground shadow-sm">
+  <div class="flex flex-col space-y-1.5 p-6">
+    <h3 class="text-2xl font-semibold leading-none tracking-tight">Password</h3>
+    <p class="text-sm text-muted-foreground">Change your password here. After saving, you'll be logged out.</p>
+  </div>
+  <div class="p-6 pt-0 space-y-2">
+    <div class="space-y-1">
+      <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="current">Current password</label>
+      <input class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" id="current" type="password">
+    </div>
+    <div class="space-y-1">
+      <label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="new">New password</label>
+      <input class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50" id="new" type="password">
+    </div>
+  </div>
+  <div class="flex items-center p-6 pt-0">
+    <button class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2">Save password</button>
+  </div>
+</div>

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

@@ -0,0 +1,14 @@
+<%= render_tabs do %>
+  <%= tab_list do %>
+    <%= tab "Account" %>
+    <%= tab "Password", active: true %>
+  <% end %>
+  <%= tab_panels do %>
+    <%= tab_panel do %>
+      <%= render "examples/components/tabs/code/account" %>
+    <% end %>
+    <%= tab_panel active: true do %>
+      <%= render "examples/components/tabs/code/password" %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,12 @@
+<%= render_tabs do %>
+  <%= tab_list do %>
+    <%= tab title %>
+    <%= tab title, active: true %>
+  <% end %>
+  <%= tab_panels do %>
+    <%= tab_panel do %>
+    <% end %>
+    <%= tab_panel active: true do %>
+    <% end %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,27 @@
+<%= render "layouts/documentation/component_header",
+  title: "Tabs",
+  description: "" %>
+
+<% content_for :preview, flush: true do %>
+<div class="w-full flex justify-center">
+  <%= render_code_preview('tabs') %>
+</div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+<div class="w-full flex justify-center">
+  <%= code_partial("tabs/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 tabs
+<% 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("tabs/usage", :erb) %>
+
+<%= render_usage("tabs") %>

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

@@ -0,0 +1,6 @@
+<%= render_toast header: "Invalid Login",
+      id: "alert_toast",
+      description: "Could not find email password combination.",
+      variant: :destructive,
+      auto: false,
+      class: "hidden" %>

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

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

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

@@ -2,8 +2,10 @@
       description: "A succinct message that is displayed temporarily." %>
 
 <% content_for :preview, flush: true do %>
-  <%= render_button "Trigger Toast", variant: "outline", data: {controller: "ui--toast", action: "ui--toast#test"} %>
-  <%= render_code_preview('toast') %>
+  <div class="w-full flex justify-center">
+    <%= render_button "Trigger Toast", variant: "outline", data: {controller: "ui--toast", action: "ui--toast#trigger", target: "#default_toast"} %>
+    <%= render_code_preview('toast') %>
+  </div>
 <% end %>
 
 <% content_for :code, flush: true do %>
@@ -21,3 +23,16 @@
 <%= code_partial("toast/usage", :erb) %>
 
 <%= render_usage("toast") %>
+
+<% content_for :examples, flush: true do %>
+  <div class="w-full flex justify-center">
+    <%= render_button "Trigger Destructive Toast", variant: "outline", data: {controller: "ui--toast", action: "ui--toast#trigger", target: "#alert_toast"} %>
+    <%= render "examples/components/toast/code/destructive" %>
+  </div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+  <%= code_partial("toast/destructive", :erb) %>
+<% end %>
+
+<%= render_example %>

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

@@ -1,11 +1,10 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title><%= page_title %></title>
     <meta
       name="viewport"
       content="width=device-width,initial-scale=1">
-    <!--prettier-ignore-->
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
     <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>
@@ -13,6 +12,13 @@
     <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
     <%= content_for :stylesheets %>
     <%= javascript_importmap_tags %>
+
+    <%= display_meta_tags(
+          description: "An open-source frontend themed component library for Ruby on Rails based on shadcn/ui.",
+          keywords: "shadcn/ui, rails components, ruby on rails, rails themes, viewcomponent, shadcn, ror themes, rails designs.",
+          og: {title: :title, description: :description, image: "/public/og.png"}, twitter: {image: "/public/og.png"}
+        ) %>
+    <script defer data-domain="rails-components.com" src="https://a.wip.dev/js/script.js"></script>
   </head>
 
   <body>
@@ -20,12 +26,28 @@
       <%= render 'layouts/shared/header' %>
       <div class="flex-1">
         <div class="border-b">
-          <div
-            class="container flex-1 items-start ">
+          <div class="container flex-1 items-start">
             <!--prettier-ignore-->
             <%= yield %>
           </div>
         </div>
+        <footer class="py-6 md:px-8 md:py-0">
+          <div
+            class="container flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row">
+            <p class="text-center text-sm leading-loose text-muted-foreground md:text-left">
+              A
+              <a
+                href="https://rails-components.com"
+                target="_blank"
+                rel="noreferrer"
+                class="font-medium underline underline-offset-4">Rails Components</a> Project by               <a
+                href="https://twitter.com/aviflombaum"
+                target="_blank"
+                rel="noreferrer"
+                class="font-medium underline underline-offset-4">aviflombaum</a>.
+            </p>
+          </div>
+        </footer>
       </div>
     </div>
   </body>

data/app/views/layouts/documentation/_component_header.html.erb

@@ -1,11 +1,12 @@
 <div class="space-y-2">
-  <h1 class="scroll-m-20 text-4xl font-bold tracking-tight"><%= title %></h1>
+  <h1 class="scroll-m-20  flex justify-between">
+    <span class="text-4xl font-bold tracking-tight"><%= title %></span>
+    <%= render_button "Edit", variant: :ghost, class: "text-sm", as: :link, href: "https://github.com/aviflombaum/shadcn-rails/blob/main/app/views/examples/components/#{params[:component]}.html.erb" %>
+  </h1>
   <p class="text-lg text-muted-foreground">
     <span
       data-br=":r24:"
       data-brr="1"
-      style="display: inline-block; vertical-align: top; text-decoration: inherit"
-      ><%= description %></span
-    >
+      style="display: inline-block; vertical-align: top; text-decoration: inherit"><%= description %></span>
   </p>
 </div>

data/app/views/layouts/documentation/_examples.html.erb

@@ -1,6 +1,6 @@
 
 
-    <div class="group relative my-4 flex flex-col space-y-2" data-controller="tabs">
+    <div class="group relative my-4 flex flex-col space-y-2" data-controller="ui--tabs">
       <div
         dir="ltr"
         data-orientation="horizontal"
@@ -15,7 +15,7 @@
             style="outline: none">
             <button
               type="button"
-              data-tabs-target="tab"
+              data-ui--tabs-target="tab"
               role="tab"
               aria-selected="true"
               aria-controls="content-preview"
@@ -23,28 +23,26 @@
               id="trigger-preview"
               class="inline-flex items-center justify-center whitespace-nowrap py-1 text-sm ring-offset-background 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 relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
               tabindex="-1"
-              data-orientation="horizontal"
-              data-radix-collection-item="">
+              data-orientation="horizontal">
               Preview</button>
             <button
               type="button"
               role="tab"
-              data-tabs-target="tab"
+              data-ui--tabs-target="tab"
               aria-selected="false"
               aria-controls="content-code"
               data-state="inactive"
               id="trigger-code"
               class="inline-flex items-center justify-center whitespace-nowrap py-1 text-sm ring-offset-background 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 relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
               tabindex="-1"
-              data-orientation="horizontal"
-              data-radix-collection-item="">
+              data-orientation="horizontal">
               Code
             </button>
           </div>
         </div>
         <div
           data-state="active"
-          data-tabs-target="panel"
+          data-ui--tabs-target="panel"
           data-orientation="horizontal"
           role="tabpanel"
           aria-labelledby="trigger-preview"
@@ -61,7 +59,7 @@
         </div>
         <div
           data-state="inactive"
-          data-tabs-target="panel"
+          data-ui--tabs-target="panel"
           data-orientation="horizontal"
           role="tabpanel"
           aria-labelledby="trigger-code"

data/app/views/layouts/documentation/_preview.html.erb

@@ -8,7 +8,7 @@
       id="examples">
       Examples
     </h2>
-    <div class="group relative my-4 flex flex-col space-y-2" data-controller="tabs">
+    <div class="group relative my-4 flex flex-col space-y-2" data-controller="ui--tabs">
       <div
         dir="ltr"
         data-orientation="horizontal"
@@ -23,7 +23,7 @@
             style="outline: none">
             <button
               type="button"
-              data-tabs-target="tab"
+              data-ui--tabs-target="tab"
               role="tab"
               aria-selected="true"
               aria-controls="content-preview"
@@ -37,7 +37,7 @@
             <button
               type="button"
               role="tab"
-              data-tabs-target="tab"
+              data-ui--tabs-target="tab"
               aria-selected="false"
               aria-controls="content-code"
               data-state="inactive"
@@ -52,7 +52,7 @@
         </div>
         <div
           data-state="active"
-          data-tabs-target="panel"
+          data-ui--tabs-target="panel"
           data-orientation="horizontal"
           role="tabpanel"
           aria-labelledby="trigger-preview"
@@ -69,7 +69,7 @@
         </div>
         <div
           data-state="inactive"
-          data-tabs-target="panel"
+          data-ui--tabs-target="panel"
           data-orientation="horizontal"
           role="tabpanel"
           aria-labelledby="trigger-code"

data/app/views/layouts/shared/_components.html.erb

@@ -18,7 +18,7 @@
         <div class="grid grid-flow-row auto-rows-max text-sm">
           <%= sidebar_link "✅ 📖 Accordion", "/docs/components/accordion" %>
           <%= sidebar_link "✅ 📖 Alert", "/docs/components/alert" %>
-          <%#= sidebar_link "✅ Alert Dialog", "/docs/components/alert-dialog" %>
+          <%= sidebar_link "✅ 📖 Alert Dialog", "/docs/components/alert-dialog" %>
           <%#= sidebar_link "❌ Aspect Ratio", "/docs/components/aspect-ratio" %>
           <%#= sidebar_link "❌ Avatar", "/docs/components/avatar" %>
           <%= sidebar_link "✅ 📖 Badge", "/docs/components/badge" %>
@@ -27,15 +27,15 @@
           <%= sidebar_link "✅ 📖 Card", "/docs/components/card" %>
           <%= sidebar_link "✅ 📖 Checkbox", "/docs/components/checkbox" %>
           <%= sidebar_link "✅ 📖 Collapsible", "/docs/components/collapsible" %>
-          <%#= sidebar_link "Combobox", "/docs/components/combobox" %>
+          <%= sidebar_link "✅ 📖 Combobox", "/docs/components/combobox" %>
           <%#= sidebar_link "Command", "/docs/components/command" %>
           <%#= sidebar_link "Context Menu", "/docs/components/context-menu" %>
           <%#= sidebar_link "Data Table", "/docs/components/data-table" %>
           <%#= sidebar_link "Date Picker", "/docs/components/date-picker" %>
           <%= sidebar_link "✅ 📖 Dialog", "/docs/components/dialog" %>
           <%= sidebar_link "✅ 📖 Dropdown Menu", "/docs/components/dropdown-menu" %>
-          <%= sidebar_link "➕ 📖 Filter", "/docs/components/filter" %>
-          <%#= sidebar_link "Form", "/docs/components/form" %>
+          <%= sidebar_link "✅ 📖 Filter", "/docs/components/filter" %>
+          <%= sidebar_link "✅ 📖  Forms", "/docs/components/forms" %>
           <%= sidebar_link "✅ 📖 Hover Card", "/docs/components/hover-card" %>
           <%= sidebar_link "✅ 📖 Input", "/docs/components/input" %>
           <%= sidebar_link "✅ 📖 Label", "/docs/components/label" %>
@@ -50,9 +50,9 @@
           <%= sidebar_link "✅ 📖 Sheet", "/docs/components/sheet" %>
           <%= sidebar_link "✅ 📖 Skeleton", "/docs/components/skeleton" %>
           <%= sidebar_link "✅ 📖 Slider", "/docs/components/slider" %>
-          <%#= sidebar_link "Switch", "/docs/components/switch" %>
+          <%= sidebar_link "✅ 📖 Switch", "/docs/components/switch" %>
           <%#= sidebar_link "Table", "/docs/components/table" %>
-          <%#= sidebar_link "Tabs", "/docs/components/tabs" %>
+          <%= sidebar_link "✅ 📖 Tabs", "/docs/components/tabs" %>
           <%= sidebar_link "✅ 📖 Textarea", "/docs/components/textarea" %>
           <%= sidebar_link "✅ 📖 Toast", "/docs/components/toast" %>
           <%= sidebar_link "✅ 📖 Toggle", "/docs/components/toggle" %>