shadcn-ui 0.0.4 → 0.0.8

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/toast_helper.rb

@@ -1,5 +1,8 @@
 module Components::ToastHelper
-  def render_toast(header: nil, description: nil, action: nil, class: nil, data: nil, **options, &block)
+  def render_toast(header: nil, description: nil, action: nil, class: nil, data: {}, variant: :default, **options, &block)
+    options[:class] ||= ""
+    options[:class] << " destructive group border-destructive bg-destructive text-destructive-foreground " if variant == :destructive
+
     render "components/ui/toast", header:, description:, action:, class:, data:, options: options
   end
 end

data/app/helpers/components_helper.rb

@@ -1,4 +1,10 @@
+require "tailwind_merge"
+
 module ComponentsHelper
+  def tw(classes)
+    TailwindMerge::Merger.new.merge(classes)
+  end
+
   PRIMARY_CLASSES = " bg-primary text-primary-foreground hover:bg-primary/80 "
   SECONDARY_CLASSES = " bg-secondary text-secondary-foreground hover:bg-secondary/80 "
   OUTLINE_CLASSES = "  border border-input bg-background hover:bg-accent hover:text-accent-foreground "
@@ -6,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/dialog_controller.js

@@ -1,6 +1,6 @@
 // Inspired by https://github.com/kanety/stimulus-dialog
 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 UIDialog extends Controller {
   static targets = ["dialog", "modal", "focus", "drag", "backdrop", "closeButton"];

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

@@ -1,5 +1,5 @@
 // Inspired By: https://github.com/stimulus-components/stimulus-dropdown/blob/master/src/index.ts
 import UIPopover from "controllers/ui/popover_controller";
-import { useTransition } from "stimulus-use";
+import { useTransition } from "https://ga.jspm.io/npm:stimulus-use@0.51.3/dist/index.js";
 
 export default class extends UIPopover {}

data/app/javascript/controllers/ui/hover-card_controller.js

@@ -1,9 +1,8 @@
 // Inspired by: https://github.com/excid3/tailwindcss-stimulus-components/blob/master/src/popover.js
 
 import { Controller } from "@hotwired/stimulus";
-import { createPopper } from "@popperjs/core";
-import { useDebounce } from "stimulus-use";
-import { useHover } from "stimulus-use";
+import { createPopper } from "https://ga.jspm.io/npm:@popperjs/core@2.11.8/lib/index.js";
+import { useDebounce, useHover } from "https://ga.jspm.io/npm:stimulus-use@0.51.3/dist/index.js";
 
 export default class UIHoverCardController extends Controller {
   static debounces = ["mouseEnter", "mouseLeave"];

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

@@ -1,8 +1,8 @@
 // Inspired by: https://github.com/excid3/tailwindcss-stimulus-components/blob/master/src/popover.js
 
 import { Controller } from "@hotwired/stimulus";
-import { createPopper } from "@popperjs/core";
-import { useClickOutside } from "stimulus-use";
+import { createPopper } from "https://ga.jspm.io/npm:@popperjs/core@2.11.8/lib/index.js";
+import { useClickOutside } from "https://ga.jspm.io/npm:stimulus-use@0.51.3/dist/index.js";
 
 export default class UIPopover extends Controller {
   static values = {

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

@@ -1,5 +1,5 @@
 import UIDialog from "controllers/ui/dialog_controller";
-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 UIDialog {
   // Handles a button triggering the sheet in a different

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/javascript/controllers/ui/toast_controller.js

@@ -4,40 +4,67 @@ export default class UIToastController extends Controller {
   static targets = ["item"];
 
   connect() {
-    setTimeout(() => {
-      this.openAll();
-    }, 1000);
+    if (this.element.role == "region" && this.element.dataset.auto != "false") {
+      setTimeout(() => {
+        this.open();
+      }, 1000);
+      this.close();
+    }
+  }
+
+  open() {
+    const toastElement = this.element.querySelector("[data-ui--toast-target='item']");
+    this.element.dataset.state = "open";
+    this.element.classList.remove("hidden");
+    this.showToast(toastElement);
+  }
+
+  close() {
+    const toastElement = this.element.querySelector("[data-ui--toast-target='item']");
+    this.element.dataset.state = "closed";
+    this.element.classList.add("hidden");
+    this.closeToast(toastElement);
+  }
+
+  showToast(el) {
+    if (el) {
+      el.dataset.state = "open";
+      el.classList.remove("hidden");
+    }
+  }
 
-    this.closeAll();
+  closeToast(el) {
+    if (el) {
+      setTimeout(() => {
+        el.dataset.state = "closed";
+        el.classList.add("hidden");
+      }, el.dataset.duration || 3000);
+    }
+  }
+
+  trigger() {
+    const idTarget = this.element.dataset.target;
+    const toastContainer = document.querySelector(`${idTarget}`);
+    toastContainer.dataset.state = "open";
+    toastContainer.classList.remove("hidden");
+    const toastElement = toastContainer.querySelector("[data-ui--toast-target='item']");
+    this.showToast(toastElement);
+    this.closeToast(toastElement);
   }
 
   openAll() {
-    const toastElements = document.querySelectorAll("[data-ui--toast-target='item']");
+    const toastElements = document.querySelectorAll(
+      "[data-ui--toast-target='item']:not([data-visible='false'])",
+    );
     toastElements.forEach((toastElement) => {
-      toastElement.dataset.state = "open";
-      toastElement.classList.remove("hidden");
+      this.showToast(toastElement);
     });
   }
 
   closeAll() {
     const toastElements = document.querySelectorAll("[data-ui--toast-target='item']");
     toastElements.forEach((toastElement) => {
-      setTimeout(() => {
-        toastElement.dataset.state = "closed";
-        toastElement.classList.add("hidden");
-      }, toastElement.dataset.duration);
+      this.closeToast(toastElement);
     });
   }
-
-  test() {
-    const $this = this;
-    this.closeAll();
-    setTimeout(() => {
-      $this.openAll();
-      setTimeout(() => {
-        $this.closeAll();
-      }, 3000);
-    }, 1000);
-  }
-  close() {}
 }

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

@@ -1,5 +1,5 @@
 import { Controller } from "@hotwired/stimulus";
-import { useTransition } from "stimulus-use";
+import { useTransition } from "https://ga.jspm.io/npm:stimulus-use@0.51.3/dist/index.js";
 
 export default class extends Controller {
   connect() {

data/app/models/user.rb

@@ -0,0 +1,9 @@
+class User
+  include ActiveModel::API
+  include ActiveModel::SecurePassword
+
+  attr_accessor :email, :password_digest
+
+  has_secure_password
+  validates :email, presence: true
+end

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/_alert_dialog.html.erb

@@ -1,7 +1,7 @@
 <div data-controller="ui--dialog">
+  <div data-action="click->ui--dialog#open"><%= content_for(:alert_dialog_trigger) %></div>
   <%= render "components/ui/shared/backdrop", as: "backdrop" %>
 
-  <%= trigger %>
   <div
     role="alertdialog"
     data-state="closed"
@@ -9,12 +9,16 @@
     tabindex="-1"
     style="pointer-events: auto"
     data-ui--dialog-target="dialog">
-    <div class="flex flex-col space-y-2 text-center sm:text-left">
-      <h2 class="text-lg font-semibold"><%= label %></h2>
-      <p class="text-sm text-muted-foreground"><%= description %></p>
-    </div>
+      <div>
+        <%= content_for(:alert_dialog_content) %>
+      </div>
     <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
-      <%= cancel %> <%= continue %>
+      <div data-action="click->ui--dialog#close">
+        <%= content_for(:alert_dialog_cancel) %>
+      </div>
+      <div data-action="click->ui--dialog#close">
+        <%= content_for(:alert_dialog_continue) %>
+      </div>
     </div>
   </div>
 </div>

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/_dialog.html.erb

@@ -41,29 +41,3 @@
       </button>
   </div>
 </div>
-<!-- <div data-controller="ui--dialog">
-  <div
-    data-ui--dialog-target="modal"
-    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-aria-hidden="true"
-    aria-hidden="true"></div>
-
-  <%#= trigger %>
-  <div
-    role="alertdialog"
-    data-state="closed"
-    class="hidden fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full"
-    tabindex="-1"
-    style="pointer-events: auto"
-    data-ui--dialog-target="dialog">
-    <div class="flex flex-col space-y-2 text-center sm:text-left">
-      <h2 class="text-lg font-semibold"><%#= label %></h2>
-      <p class="text-sm text-muted-foreground"><%#= description %></p>
-    </div>
-    <div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2">
-      <%#= cancel %> <%#= continue %>
-    </div>
-  </div>
-</div> -->

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

@@ -2,7 +2,7 @@
 <%= 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_input name: "filter", placeholder: "Filter items...", variant: :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

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

@@ -2,6 +2,9 @@
 <%= text_field_tag name, value, type: type, id: id,
               class: options[:class],
               placeholder: options[:placeholder],
+              autocomplete: options[:autocomplete],
+              autocapitalize: options[:autocapitalize],
+              autocorrect: options[:autocorrect],
               disabled: options[:disabled],
               required: options[:required],
               readonly: options[:readonly],

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

@@ -1,3 +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]}" %>
+  class: tw("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 #{options[:class]}") %>

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/_toast.html.erb

@@ -1,4 +1,8 @@
-<div role="region" aria-label="Notifications (F8)" tabindex="-1" style="" data-controller="ui--toast #{data[:controller]}">
+<div role="region" aria-label="Notifications (F8)" tabindex="-1" style=""
+  id="<%= options[:id] %>"
+  data-controller="ui--toast <%= data[:controller] %>"
+  data-auto="<%= options[:auto] %>"
+  class="hidden">
   <span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; overflow-wrap: normal;"></span>
   <ol tabindex="-1" class="fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]">
     <li role="status"
@@ -9,7 +13,7 @@
       data-ui--toast-target="item"
       data-swipe-direction="right"
       data-duration="5000"
-      class="toast-item hidden group pointer-events-auto relative flex w-full items-center
+      class="<%= tw("toast-item hidden group pointer-events-auto relative flex w-full items-center
             justify-between space-x-4 overflow-hidden rounded-md p-6 pr-8 shadow-lg
              transition-all
              data-[swipe=cancel]:translate-x-0
@@ -20,14 +24,14 @@
              data-[state=closed]:fade-out-80
              data-[state=open]:slide-in-from-top-full
              data-[state=open]:sm:slide-in-from-bottom-full
-             border bg-background"
+             border bg-background #{options[:class]}") %>"
       style="user-select: none; touch-action: none;">
       <div class="grid gap-1">
         <div class="text-sm font-semibold"><%= header %></div>
         <div class="text-sm opacity-90"><%= description %></div>
       </div>
       <%= action %>
-      <button data-action="ui--toast#closeAll" type="button" class="absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600" toast-close="" data-radix-toast-announce-exclude=""><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></button>
+      <button data-action="ui--toast#close" type="button" class="absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600" toast-close="" data-radix-toast-announce-exclude=""><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></button>
     </li>
   </ol>
   <span aria-hidden="true" tabindex="0" style="position: fixed; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; overflow-wrap: normal;"></span>

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/documentation/installation.html.md

@@ -32,7 +32,7 @@ The components need a few things in order to render and function properly
    package.json if you need via `echo '{}' >> package.json`.
 
 ```
-npm install -D tailwind-animate
+npm install -D tailwindcss-animate
 ```
 
 These are the requirements if you want to add them individually:

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/alert-dialog/_usage.html.erb

@@ -0,0 +1,24 @@
+<p class="leading-7 [&:not(:first-child)]:mt-6">The Alert Dialog component introduces:</p>
+
+<ul class="my-6 ml-6 list-disc [&>li]:mt-2 text-sm">
+  <li><%= code("app/helpers/components/alert_dialog_helper.rb") %></li>
+  <li><%= code("app/views/components/ui/_alert_dialog.html.erb") %></li>
+</ul>
+
+And relies on <%= code("app/javascript/controllers/ui/dialog_controller.js") %>.
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+The method <%= code("render_alert_dialog") %> defined in <%= code("app/helpers/components/alert_dialog_helper.rb") %>
+accepts a block for the inner components  of the dialog. It renders the partial
+<%= code("app/views/components/ui/_alert_dialog.html.erb") %> which contains the model structure and
+and the 2 actions buttons of continue and cancel.
+</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+The modal is composed of 4 components with corresponding helper methods, <%= code("alert_dialog_trigger") %>,
+which accepts a block for the element that will trigger the modal, and <%= code("alert_dialog_content") %>,
+which accepts a block for the body of the modal and the two actions for the modal, <%= code("alert_dialog_cancel") %> for the element that you would like to cancel the dialog interaction, for example a button, and <%= code("alert_dialog_continue") %> for the element you would like to use to continue to interaction. Note, you should feel free to bind your own data actions to these buttons as they are enclosed in an element that will handle closing the modal on click.
+</p>
+
+<p class="leading-7 [&:not(:first-child)]:mt-6">
+See <a href="/docs/components/dialog">Dialog</a> for more context as this component inherits functionality from that one.</p>

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

@@ -1,6 +1,22 @@
-<%= render_alert_dialog(
-  trigger: render_button("Open Dialog", variant: :outline, data: {action: "ui--dialog#open" }),
-  continue: render_button("Continue"),
-  label: "Are you absolutely sure?",
-  description: "This action cannot be undone. This will permanently delete your account and remove your data from our servers.",
-) %>
+<%= render_alert_dialog do %>
+  <%= alert_dialog_trigger do %>
+    <%= render_button("Open Dialog", variant: :outline) %>
+  <% end %>
+
+  <%= alert_dialog_content do %>
+  <div class="flex flex-col space-y-2 text-center sm:text-left">
+    <h2 class="text-lg font-semibold">Are you absolutely sure?</h2>
+    <p class="text-sm text-muted-foreground">
+      This action cannot be undone. This will permanently delete your account and remove your data from our servers.
+    </p>
+  </div>
+  <% end %>
+
+  <%= alert_dialog_cancel do %>
+    <%= render_button("Cancel", variant: :outline) %>
+  <% end %>
+
+  <%= alert_dialog_continue do %>
+    <%= render_button("Continue") %>
+  <% end %>
+<% end %>