shadcn-ui 0.0.5 → 0.0.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cc5e15a7e38cfc62b7c6baeabfd28b0d1b1869d9c1af906cee95a6c1d6dafb0e
-  data.tar.gz: 4ace082612e01960d714dc068e734a67d57cac288f77bb13eed827d22591e87e
+  metadata.gz: d1a6d106b3e241c5c7a418478bde0b7c4e4e50ce27c0999a1963d7a40b543dd2
+  data.tar.gz: 47a2ff41f7186f01c3cdef384b2b602b39868fbd9f2c2f15f7a3d8c2e0d3a72c
 SHA512:
-  metadata.gz: f604552bb826fd72f8974ce1a5fec84c93ece1957df5b8831287abb7f2ffb5520068a713bd6f8fd9d9b4804ab6cce50648adc32778282472f991a328f2da6b0b
-  data.tar.gz: 5bc64754ad18e8d2d70641934bfc8db0bea5855b3921b43a9626214122da0dfb12b9e925c904ae3525bbf7f7c44c50b696701b90f6c2bf3db239e0ae051c9232
+  metadata.gz: 0b040f697a8b80b085a5d4a595bb20ed7b78b9f26d90082831977feb7acb80389787c8b23983f2094cde67212f5bf0a682f206c79171231d5b023ca22e11716e
+  data.tar.gz: 1e44cfd6682738fc2df66f886ba9d2c6de2b044c6828f43ff9e2b67aef0f37f62a01087f78bd4158911083eee8cb45ef59f18ad64e0044d824b7b6075ccb6966

data/Procfile.dev

@@ -1 +1,2 @@
+web: bin/rails server -p 3000
 css: bin/rails tailwindcss:watch

data/Rakefile

@@ -1,6 +1,7 @@
 # Add your own tasks in files placed in lib/tasks ending in .rake,
 # for example lib/tasks/capistrano.rake, and they will automatically be available to Rake.
 require "bundler/gem_tasks"
+require 'fileutils'
 
 if ENV["RAILS_ENV"] != "production"
   require "rspec/core/rake_task"
@@ -13,3 +14,92 @@ end
 require_relative "config/application"
 
 Rails.application.load_tasks
+# Rake task
+
+HELPER_TEMPLATE = <<~TEMPLATE
+module Components::<%= component_name %>Helper
+end
+TEMPLATE
+
+STIMULUS_TEMPLATE = <<~TEMPLATE
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+}
+TEMPLATE
+
+def documentation_erb(name)
+  content  = <<~TEMPLATE
+<%= render "layouts/documentation/component_header",
+  title: "#{name.capitalize}",
+  description: "" %>
+
+<% content_for :preview, flush: true do %>
+<div class="w-full flex justify-center">
+  <%= render_code_preview('#{name}') %>
+</div>
+<% end %>
+
+<% content_for :code, flush: true do %>
+<div class="w-full flex justify-center">
+  <%= code_partial("#{name}/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 #{name}
+<% 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("#{name}/usage", :erb) %>
+
+<%= render_usage("#{name}") %>
+TEMPLATE
+end
+
+namespace :component do
+  desc "Generate a new component"
+  task :generate => :environment do
+    name = ENV['name']
+    abort("No component name provided. Use `rake component:generate name=component_name`") unless name.present?
+
+    puts "Do you want to include a Stimulus controller? (yes/no)"
+    response = STDIN.gets.chomp.downcase
+
+    component_view_path = Rails.root.join("app", "views", "components", "ui", "_#{name}.html.erb")
+    helper_path = Rails.root.join("app", "helpers", "components", "#{name}_helper.rb")
+    controller_path = Rails.root.join("app", "javascript", "controllers", "ui", "#{name}_controller.js")
+
+    documentation_path = Rails.root.join("app", "views", "examples", "components", "#{name}.html.erb")
+    preview_path = Rails.root.join("app", "views", "examples", "components", name, "code", "_preview.html.erb")
+    preview_directory_path = Rails.root.join("app", "views", "examples", "components", name, "code")
+    preview_file_path = "#{preview_directory_path}/_preview.erb"
+    sample_usage_path = "#{preview_directory_path}/_usage.erb"
+    usage_instructions_path = Rails.root.join("app", "views", "examples", "components", name, "_usage.html.erb")
+
+    camelized_name = name.camelize
+    helper_template = ERB.new(HELPER_TEMPLATE)
+    helper_content = helper_template.result_with_hash(component_name: camelized_name)
+
+    stimulus_template = ERB.new(STIMULUS_TEMPLATE)
+    stimulus_content = stimulus_template.result
+
+    File.new(component_view_path, "w")
+    File.open(helper_path, "w") { |file| file.write(helper_content) }
+
+    File.open(documentation_path, "w") { |file| file.write(documentation_erb(name)) }
+    FileUtils.mkdir_p(preview_directory_path)
+    File.new(preview_file_path, "w")
+    File.new(sample_usage_path, "w")
+    File.new(usage_instructions_path, "w")
+
+    if ["yes", "y"].include?(response.downcase)
+      File.open(controller_path, "w") { |file| file.write(stimulus_content) }
+    end
+
+    puts "Component #{name} was created successfully!"
+  end
+end

data/app/assets/stylesheets/shadcn.css

@@ -121,7 +121,7 @@ input[type="number"]:focus {
 input[type="range"] {
   -webkit-appearance: none;
   margin-right: 15px;
-  width: 200px;
+  min-width: 200px;
   height: 7px;
   background: #f4f4f5;
   border-radius: 5px;

data/app/helpers/application_helper.rb

@@ -6,6 +6,11 @@ module ApplicationHelper
       @page_title << "#{component_name} - " if component_name.present?
     end
     @page_title << "shadcn/ui on Rails"
+
+    set_meta_tags(
+      title: @page_title
+    )
+
     @page_title
   end
 

data/app/helpers/components/alert_helper.rb

@@ -1,12 +1,16 @@
 module Components::AlertHelper
-  def render_alert(title:, description:, variant: :default, icon: true)
+  def render_alert(title:, description: nil, variant: :default, icon: true)
     alert_classes = case variant.to_sym
     when :default
       "[&>svg]:text-foreground bg-background text-foreground"
     when :error, :danger, :alert, :destructive
       "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
-    else
-      "border-#{variant}/50 text-#{variant} dark:border-#{variant} [&>svg]:text-#{variant}"
+    when :success
+      "border-success/50 text-success dark:border-success [&>svg]:text-success"
+    when :info
+      "border-info/50 text-info dark:border-info [&>svg]:text-info"
+    when :attention
+      "border-attention/50 text-attention dark:border-attention [&>svg]:text-attention"
     end
     render "components/ui/alert", title:, description:, alert_classes:, variant:, icon:
   end

data/app/helpers/components/badge_helper.rb

@@ -15,6 +15,9 @@ module Components::BadgeHelper
     end
     badge_classes << " #{varianet_classes}"
     text = label if label.present?
-    render "components/ui/badge", text:, badge_classes:, data:, **options
+
+    content_tag :div, class: badge_classes do
+      text
+    end
   end
 end

data/app/helpers/components/combobox_helper.rb

@@ -0,0 +1,10 @@
+module Components::ComboboxHelper
+  def render_combobox(items, &block)
+    content = capture(&block) if block
+    render "components/ui/combobox", items:, content:
+  end
+
+  def combobox_trigger(&block)
+    content_for :trigger, capture(&block) if block
+  end
+end

data/app/helpers/components/{seperator_helper.rb → separator_helper.rb}

@@ -1,4 +1,4 @@
-module Components::SeperatorHelper
+module Components::SeparatorHelper
   def render_separator(options = {})
     options = {class: "shrink-0 bg-border h-[1px] w-full #{options[:class]}"}.reverse_merge(options)
     content_tag :div, "", options

data/app/helpers/components/slider_helper.rb

@@ -1,5 +1,5 @@
 module Components::SliderHelper
   def render_slider(name:, value: 0, id: nil, **options)
-    render "components/ui/slider", value:, id:, name:, **options
+    render "components/ui/slider", value:, id:, name:, options:
   end
 end

data/app/helpers/components/switch_helper.rb

@@ -0,0 +1,5 @@
+module Components::SwitchHelper
+  def render_switch(text, id:, name:, state: "unchecked", **options)
+    render "components/ui/switch", text:, id:, name:, state:, options:
+  end
+end

data/app/helpers/components/tabs_helper.rb

@@ -0,0 +1,29 @@
+module Components::TabsHelper
+  def render_tabs(&block)
+    @_tabs = []
+    capture(&block)
+    render "components/ui/tabs"
+  end
+
+  def tab_list(&block)
+    content_for :tab_list, capture(&block), flush: true
+  end
+
+  def tab(title, **options)
+    options[:id] ||= "tab_#{title.parameterize}"
+    options[:state] = options[:active] ? "active" : "inactive"
+
+    @_tabs << {title: title, id: options[:id]}
+    render("components/ui/tabs/tab", title:, options:)
+  end
+
+  def tab_panels(&block)
+    content_for :tab_panels, capture(&block), flush: true
+  end
+
+  def tab_panel(**options, &block)
+    options[:state] = options[:active] ? "active" : "inactive"
+    content_for :panel, capture(&block), flush: true
+    render("components/ui/tabs/panel", options:)
+  end
+end

data/app/helpers/components_helper.rb

@@ -1,3 +1,5 @@
+require "tailwind_merge"
+
 module ComponentsHelper
   def tw(classes)
     TailwindMerge::Merger.new.merge(classes)
@@ -10,11 +12,11 @@ module ComponentsHelper
   DESTRUCTIVE_CLASSES = " bg-destructive text-destructive-foreground hover:bg-destructive/90 "
 
   module Button
-    PRIMARY = " bg-primary text-primary-foreground hover:bg-primary/80 "
-    SECONDARY = " bg-secondary text-secondary-foreground hover:bg-secondary/80 "
-    OUTLINE = "  border border-input bg-background hover:bg-accent hover:text-accent-foreground "
-    GHOST = " hover:bg-accent hover:text-accent-foreground  "
-    DESTRUCTIVE = " bg-destructive text-destructive-foreground hover:bg-destructive/90 "
+    PRIMARY = ComponentsHelper::PRIMARY_CLASSES
+    SECONDARY = ComponentsHelper::SECONDARY_CLASSES
+    OUTLINE = ComponentsHelper::OUTLINE_CLASSES
+    GHOST = ComponentsHelper::GHOST_CLASSES
+    DESTRUCTIVE = ComponentsHelper::DESTRUCTIVE_CLASSES
   end
 
   module Alert

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

@@ -0,0 +1,25 @@
+// Inspired by: https://github.com/excid3/tailwindcss-stimulus-components/blob/master/src/popover.js
+
+import { Controller } from "@hotwired/stimulus";
+
+export default class UIToggleController extends Controller {
+  connect() {}
+
+  toggle() {
+    const button = this.element.querySelector("button");
+    const span = this.element.querySelector("span");
+    const input = this.element.querySelector("input[type='hidden']");
+
+    if (this.element.dataset.state == "checked") {
+      input.value = "unchecked";
+      button.dataset.state = "unchecked";
+      span.dataset.state = "unchecked";
+      this.element.dataset.state = "unchecked";
+    } else {
+      input.value = "checked";
+      button.dataset.state = "checked";
+      span.dataset.state = "checked";
+      this.element.dataset.state = "checked";
+    }
+  }
+}

data/app/javascript/controllers/{tabs_controller.js → ui/tabs_controller.js}

@@ -1,6 +1,6 @@
 // https://github.com/excid3/tailwindcss-stimulus-components/blob/master/src/tabs.js
 import { Controller } from "@hotwired/stimulus";
-import "@kanety/stimulus-static-actions";
+import "https://ga.jspm.io/npm:@kanety/stimulus-static-actions@1.0.1/dist/index.modern.js";
 
 export default class extends Controller {
   static targets = ["tab", "panel"];
@@ -10,7 +10,7 @@ export default class extends Controller {
     this.activeTabClasses = (this.data.get("activeTab") || "active").split(" ");
     this.inactiveTabClasses = (this.data.get("inactiveTab") || "inactive").split(" ");
     if (this.anchor) this.index = this.tabTargets.findIndex((tab) => tab.id === this.anchor);
-    this.showTab();
+    // this.showTab();
   }
 
   change(event) {

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

@@ -8,7 +8,7 @@
           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="sm:hidden">Introducing shadcn/ui on Rails!</span>
         <span class="hidden sm:inline">Introducing shadcn/ui on Rails!</span>
         <svg
           width="15"

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

@@ -0,0 +1,11 @@
+<%= render_popover do %>
+  <%= popover_trigger do %>
+    <button class="inline-flex items-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 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2 w-[200px] justify-between" role="combobox" aria-expanded="false" type="button" aria-haspopup="dialog" data-state="closed">
+      <%= content_for :trigger %>
+      <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="ml-2 h-4 w-4 shrink-0 opacity-50"><path d="m7 15 5 5 5-5"></path><path d="m7 9 5-5 5 5"></path></svg>
+    </button>
+  <% end %>
+  <%= popover_content class: "border-none p-0" do %>
+    <%= render_filter items %>
+  <% end %>
+<% end %>

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

@@ -11,7 +11,7 @@
       data-align="center"
       data-state="closed"
       role="dialog"
-      class="hidden z-50  rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none   <%= content_for(:popover_content_class) %>"
+      class="<%= tw("hidden z-50 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none #{content_for(:popover_content_class)}") %>"
       tabindex=" -1 ">
       <%= content_for(:popover_content) %>
     </div>

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

@@ -1,2 +1,6 @@
 
-<input type="range" min="1" max="100" value="50" style="background-size: 50% 100%" data-controller="ui--slider" data-action="input->ui--slider#updateRange">
+<input type="range" min="1" max="100"
+      value="<%= value %>" id="<%= id %>" name="<%= name %>"
+      style="background-size: <%= value %>% 100%"
+      data-controller="ui--slider" data-action="input->ui--slider#updateRange"
+      class="<%= options[:class] %>">

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

@@ -0,0 +1,25 @@
+<div
+  data-controller="ui--switch"
+  class="flex items-center space-x-2 cursor-pointer"
+  data-action="click->ui--switch#toggle"
+  data-state="<%= state %>">
+  <input type="hidden" value="<%= state %>" name="<%= name %>">
+  <button
+    type="button"
+    role="switch"
+    aria-checked="false"
+    data-state="<%= state %>"
+    class="peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input"
+    id="<%= id %>">
+    <span
+      data-state="<%= state %>"
+      class="pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0">
+    </span>
+  </button>
+  <label
+    data-action="click->ui--switch#toggle"
+    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
+    for="<%= id %>">
+      <%= text %>
+  </label>
+</div>

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

@@ -0,0 +1,13 @@
+<div class="group" data-controller="ui--tabs">
+  <div
+    role="tablist"
+    aria-orientation="horizontal"
+    class="h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground grid w-full grid-cols-2"
+    tabindex="0"
+    data-orientation="horizontal"
+    style="outline: none">
+    <%= content_for :tab_list %>
+  </div>
+
+  <%= content_for :tab_panels %>
+</div>

data/app/views/components/ui/tabs/_panel.html.erb

@@ -0,0 +1,8 @@
+<div
+  data-state="<%= options[:state] %>"
+  data-ui--tabs-target="panel"
+  data-orientation="horizontal"
+  role="tabpanel"
+  class="data-[state=inactive]:hidden">
+  <%= content_for :panel %>
+</div>

data/app/views/components/ui/tabs/_tab.html.erb

@@ -0,0 +1,10 @@
+<button
+  type="button"
+  role="tab"
+  data-ui--tabs-target="tab"
+  data-state="<%= options[:state] %>"
+  class="inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 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-sm"
+  tabindex="0"
+  data-orientation="horizontal">
+  <%= title %>
+</button>

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

@@ -1,3 +1,11 @@
-<%= render_accordion title: "Did you know?", description: "You can wrap shadcn helpers in any
-component library you want!" %>
-<%= render_accordion title: "Use the generators.", description: "Add components with #{code("rails g shadcn_ui add accordion")}".html_safe %>
+<%= render_accordion title: "Did you know?",
+  description: "You can wrap shadcn helpers in any component library you want!" %>
+
+<%= render_accordion do %>
+  <%= accordion_title do %>
+    Use the generators
+  <% end %>
+  <%= accordion_description do %>
+    Add components with <%= code("rails g shadcn_ui add accordion") %>
+  <% end %>
+<% end %>

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

@@ -8,9 +8,9 @@
 
 # Title and Description Block
 <% render_accordion do %>
-  <%= content_for :title do e%>
+  <%= accordion_title do e%>
   <% end %>
 
-  <%= content_for :description do e%>
+  <%= accordion_description do e%>
   <% end %>
 <% end %>

data/app/views/examples/components/alert/code/_no_icon.erb

@@ -1,3 +1,3 @@
-<% %><%= render_alert icon: false,
+<%= render_alert icon: false,
       title: "Skip the Icon",
       description: "By setting icon: to false in your render_alert call." %>

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

@@ -27,7 +27,7 @@
           <%= 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" %>
@@ -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" %>

data/lib/components.json

@@ -30,11 +30,7 @@
   "badge": {
     "name": "badge",
     "type": "components:ui",
-    "files": [
-      "app/helpers/components/badge_helper.rb",
-      "app/views/components/ui/_badge.html.erb",
-      "app/javascript/controllers/ui/badge_controller.js"
-    ]
+    "files": ["app/helpers/components/badge_helper.rb"]
   },
   "button": {
     "name": "button",
@@ -72,6 +68,15 @@
       "app/javascript/controllers/ui/collapsible_controller.js"
     ]
   },
+  "combobox": {
+    "name": "combobox",
+    "type": "components:ui",
+    "files": [
+      "app/helpers/components/combobox_helper.rb",
+      "app/views/components/ui/_combobox.html.erb"
+    ],
+    "dependencies": [{ "component": "popover" }, { "component": "filter" }]
+  },
   "command": {
     "name": "command",
     "type": "components:ui",
@@ -127,8 +132,8 @@
     "name": "hover-card",
     "type": "components:ui",
     "files": [
-      "app/helpers/components/hover-card_helper.rb",
-      "app/views/components/ui/_hover-card.html.erb",
+      "app/helpers/components/hover_card_helper.rb",
+      "app/views/components/ui/_hover_card.html.erb",
       "app/javascript/controllers/ui/hover-card_controller.js"
     ]
   },
@@ -216,11 +221,7 @@
   "separator": {
     "name": "separator",
     "type": "components:ui",
-    "files": [
-      "app/helpers/components/separator_helper.rb",
-      "app/views/components/ui/_separator.html.erb",
-      "app/javascript/controllers/ui/separator_controller.js"
-    ]
+    "files": ["app/helpers/components/separator_helper.rb"]
   },
   "sheet": {
     "name": "sheet",
@@ -273,6 +274,8 @@
     "files": [
       "app/helpers/components/tabs_helper.rb",
       "app/views/components/ui/_tabs.html.erb",
+      "app/views/components/ui/tabs/_tab.html.erb",
+      "app/views/components/ui/tabs/_panel.html.erb",
       "app/javascript/controllers/ui/tabs_controller.js"
     ]
   },

data/lib/generators/shadcn-ui_generator.rb

@@ -67,7 +67,7 @@ class ShadcnUiGenerator < Rails::Generators::Base
 
     available_components.each do |component, _|
       description = "# A #{component} component"
-      banner_line = "rails generate shadcn-ui #{component}:install #{" " * (20 - component.length)} #{description}"
+      banner_line = "rails generate shadcn-ui #{component} #{" " * (20 - component.length)} #{description}"
       puts banner_line
     end
   end

data/lib/shadcn-ui/version.rb

@@ -1,3 +1,3 @@
 module ShadcnUi
-  VERSION = "0.0.5"
+  VERSION = "0.0.8"
 end

metadata

@@ -1,15 +1,29 @@
 --- !ruby/object:Gem::Specification
 name: shadcn-ui
 version: !ruby/object:Gem::Version
-  version: 0.0.5
+  version: 0.0.8
 platform: ruby
 authors:
 - Avi Flombaum
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-07-26 00:00:00.000000000 Z
-dependencies: []
+date: 2023-08-03 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: tailwind_merge
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.7'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.7'
 description: This gem is a documentation site and gem that will copy components from
   the shadcn-ui library into a Ruby on Rails application.
 email:
@@ -19,7 +33,6 @@ extensions: []
 extra_rdoc_files: []
 files:
 - ".editorconfig"
-- ".env"
 - ".prettierignore"
 - ".prettierrc.json"
 - ".rspec"
@@ -55,6 +68,7 @@ files:
 - app/helpers/components/card_helper.rb
 - app/helpers/components/checkbox_helper.rb
 - app/helpers/components/collapsible_helper.rb
+- app/helpers/components/combobox_helper.rb
 - app/helpers/components/dialog_helper.rb
 - app/helpers/components/dropdown_menu_helper.rb
 - app/helpers/components/filter_helper.rb
@@ -65,10 +79,12 @@ files:
 - app/helpers/components/list_helper.rb
 - app/helpers/components/popover_helper.rb
 - app/helpers/components/progress_helper.rb
-- app/helpers/components/seperator_helper.rb
+- app/helpers/components/separator_helper.rb
 - app/helpers/components/sheet_helper.rb
 - app/helpers/components/skeleton_helper.rb
 - app/helpers/components/slider_helper.rb
+- app/helpers/components/switch_helper.rb
+- app/helpers/components/tabs_helper.rb
 - app/helpers/components/textarea_helper.rb
 - app/helpers/components/toast_helper.rb
 - app/helpers/components/toggle_helper.rb
@@ -81,7 +97,6 @@ files:
 - app/javascript/controllers/hello_controller.js
 - app/javascript/controllers/highlight_controller.js
 - app/javascript/controllers/index.js
-- app/javascript/controllers/tabs_controller.js
 - app/javascript/controllers/theme_controller.js
 - app/javascript/controllers/ui/accordion_controller.js
 - app/javascript/controllers/ui/checkbox_controller.js
@@ -93,6 +108,8 @@ files:
 - app/javascript/controllers/ui/popover_controller.js
 - app/javascript/controllers/ui/sheet_controller.js
 - app/javascript/controllers/ui/slider_controller.js
+- app/javascript/controllers/ui/switch_controller.js
+- app/javascript/controllers/ui/tabs_controller.js
 - app/javascript/controllers/ui/toast_controller.js
 - app/javascript/controllers/ui/toggle_controller.js
 - app/javascript/controllers/ui/tooltip_controller.js
@@ -106,11 +123,11 @@ files:
 - app/views/components/ui/_accordion.html.erb
 - app/views/components/ui/_alert.html.erb
 - app/views/components/ui/_alert_dialog.html.erb
-- app/views/components/ui/_badge.html.erb
 - app/views/components/ui/_button.html.erb
 - app/views/components/ui/_card.html.erb
 - app/views/components/ui/_checkbox.html.erb
 - app/views/components/ui/_collapsible.html.erb
+- app/views/components/ui/_combobox.html.erb
 - app/views/components/ui/_command.html.erb
 - app/views/components/ui/_dialog.html.erb
 - app/views/components/ui/_dropdown_menu.html.erb
@@ -121,10 +138,11 @@ files:
 - app/views/components/ui/_list.html.erb
 - app/views/components/ui/_popover.html.erb
 - app/views/components/ui/_progress.html.erb
-- app/views/components/ui/_separator.html.erb
 - app/views/components/ui/_sheet.html.erb
 - app/views/components/ui/_skeleton.html.erb
 - app/views/components/ui/_slider.html.erb
+- app/views/components/ui/_switch.html.erb
+- app/views/components/ui/_tabs.html.erb
 - app/views/components/ui/_textarea.html.erb
 - app/views/components/ui/_toast.html.erb
 - app/views/components/ui/_toggle.html.erb
@@ -132,6 +150,8 @@ files:
 - app/views/components/ui/shared/_backdrop.html.erb
 - app/views/components/ui/shared/_menu_item.html.erb
 - app/views/components/ui/svg/_check.html.erb
+- app/views/components/ui/tabs/_panel.html.erb
+- app/views/components/ui/tabs/_tab.html.erb
 - app/views/documentation/about.html.md
 - app/views/documentation/generators.html.md
 - app/views/documentation/helpers.html.md
@@ -181,6 +201,10 @@ files:
 - app/views/examples/components/collapsible/_usage.html.erb
 - app/views/examples/components/collapsible/code/_preview.erb
 - app/views/examples/components/collapsible/code/_usage.erb
+- app/views/examples/components/combobox.html.erb
+- app/views/examples/components/combobox/_usage.html.erb
+- app/views/examples/components/combobox/code/_preview.erb
+- app/views/examples/components/combobox/code/_usage.erb
 - app/views/examples/components/dialog.html.erb
 - app/views/examples/components/dialog/_usage.html.erb
 - app/views/examples/components/dialog/code/_form.erb
@@ -240,6 +264,16 @@ files:
 - app/views/examples/components/slider/_usage.html.erb
 - app/views/examples/components/slider/code/_preview.erb
 - app/views/examples/components/slider/code/_usage.erb
+- app/views/examples/components/switch.html.erb
+- app/views/examples/components/switch/_usage.html.erb
+- app/views/examples/components/switch/code/_preview.erb
+- app/views/examples/components/switch/code/_usage.erb
+- app/views/examples/components/tabs.html.erb
+- app/views/examples/components/tabs/_usage.html.erb
+- app/views/examples/components/tabs/code/_account.html.erb
+- app/views/examples/components/tabs/code/_password.html.erb
+- app/views/examples/components/tabs/code/_preview.erb
+- app/views/examples/components/tabs/code/_usage.erb
 - app/views/examples/components/textarea.html.erb
 - app/views/examples/components/textarea/_usage.html.erb
 - app/views/examples/components/textarea/code/_preview.erb
@@ -345,7 +379,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.4.15
+rubygems_version: 3.4.10
 signing_key:
 specification_version: 4
 summary: Provides the shadcn-ui component library to a Ruby on Rails application.

data/.env

@@ -1 +0,0 @@
-RAILS_MASTER_KEY=1b9d0e6b785b2a5e2648a484f41295cd

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

@@ -1 +0,0 @@
-<div class="<%= badge_classes %>"><%= text %></div>

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

@@ -1,4 +0,0 @@
-<div
-  data-orientation="horizontal"
-  role="none"
-  class="shrink-0 bg-border h-[1px] w-full my-4"></div>