shadcn-ui 0.0.1

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

@@ -0,0 +1,25 @@
+// Inspired By: https://github.com/stimulus-components/stimulus-dropdown/blob/master/src/index.ts
+import { Controller } from "@hotwired/stimulus";
+import { useTransition } from "stimulus-use";
+
+export default class extends Controller {
+  //   menuTarget: HTMLElement
+  //   toggleTransition: (event?: Event) => void
+  //   leave: (event?: Event) => void
+  //   transitioned: false
+  //   static targets = ['menu']
+  //   connect (): void {
+  //     useTransition(this, {
+  //       element: this.menuTarget
+  //     })
+  //   }
+  //   toggle (): void {
+  //     this.toggleTransition()
+  //   }
+  //   hide (event: Event): void {
+  //     // @ts-ignore
+  //     if (!this.element.contains(event.target) && !this.menuTarget.classList.contains('hidden')) {
+  //       this.leave()
+  //     }
+  //   }
+}

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

@@ -0,0 +1,39 @@
+// 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";
+
+export default class UIHoverCardController extends Controller {
+  static debounces = ["mouseEnter", "mouseLeave"];
+  static targets = ["content", "wrapper", "trigger"];
+
+  connect() {
+    useDebounce(this);
+    useHover(this, { element: this.triggerTarget });
+    this.popperInstance = createPopper(this.triggerTarget, this.contentTarget, {
+      placement: this.contentTarget.dataset.side || "bottom",
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, 8],
+          },
+        },
+      ],
+    });
+  }
+
+  mouseEnter() {
+    this.popperInstance.update();
+    this.contentTarget.dataset.state = "open";
+    this.contentTarget.classList.remove("hidden");
+  }
+
+  mouseLeave() {
+    this.popperInstance.update();
+    this.contentTarget.dataset.state = "closed";
+    this.contentTarget.classList.add("hidden");
+  }
+}

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

@@ -0,0 +1,27 @@
+// Inspired by: https://github.com/excid3/tailwindcss-stimulus-components/blob/master/src/popover.js
+
+import { Controller } from "@hotwired/stimulus";
+import { createPopper } from "@popperjs/core";
+
+export default class extends Controller {
+  static values = {
+    dismissAfter: Number,
+  };
+  static targets = ["content", "wrapper", "trigger"];
+
+  // Sets the popover offset using Stimulus data map objects.
+
+  connect() {
+    this.popperInstance = createPopper(this.triggerTarget, this.contentTarget, {
+      placement: this.contentTarget.dataset.side || "bottom",
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, 8],
+          },
+        },
+      ],
+    });
+  }
+}

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

@@ -0,0 +1,43 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class UIToastController extends Controller {
+  static targets = ["item"];
+
+  connect() {
+    setTimeout(() => {
+      this.openAll();
+    }, 1000);
+
+    this.closeAll();
+  }
+
+  openAll() {
+    const toastElements = document.querySelectorAll("[data-ui--toast-target='item']");
+    toastElements.forEach((toastElement) => {
+      toastElement.dataset.state = "open";
+      toastElement.classList.remove("hidden");
+    });
+  }
+
+  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);
+    });
+  }
+
+  test() {
+    const $this = this;
+    this.closeAll();
+    setTimeout(() => {
+      $this.openAll();
+      setTimeout(() => {
+        $this.closeAll();
+      }, 3000);
+    }, 1000);
+  }
+  close() {}
+}

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

@@ -0,0 +1,15 @@
+// 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() {
+    if (this.element.dataset.state == "on") {
+      this.element.dataset.state = "off";
+    } else {
+      this.element.dataset.state = "on";
+    }
+  }
+}

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

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

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

@@ -0,0 +1,8 @@
+import { Controller } from "@hotwired/stimulus";
+import { useTransition } from "stimulus-use";
+
+export default class extends Controller {
+  connect() {
+    useTransition(this);
+  }
+}

data/app/jobs/application_job.rb

@@ -0,0 +1,7 @@
+class ApplicationJob < ActiveJob::Base
+  # Automatically retry jobs that encountered a deadlock
+  # retry_on ActiveRecord::Deadlocked
+
+  # Most jobs are safe to ignore if the underlying records are no longer available
+  # discard_on ActiveJob::DeserializationError
+end

data/app/mailers/application_mailer.rb

@@ -0,0 +1,4 @@
+class ApplicationMailer < ActionMailer::Base
+  default from: "from@example.com"
+  layout "mailer"
+end

data/app/models/application_record.rb

@@ -0,0 +1,3 @@
+class ApplicationRecord < ActiveRecord::Base
+  primary_abstract_class
+end

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

@@ -0,0 +1,40 @@
+<div
+  class="w-full"
+  data-orientation="vertical">
+  <div
+    data-orientation="vertical"
+    class="border-b st-accordion"
+    data-controller="ui--accordion">
+    <h3
+      data-orientation="vertical"
+      class="flex">
+      <a
+        href="content-1"
+        data-action="ui--accordion#toggle"
+        aria-expanded="true"
+        data-orientation="vertical"
+        class="flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180">
+        <%= title %><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 shrink-0 transition-transform duration-200">
+          <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+      </a>
+    </h3>
+    <div
+      data-accordion-id="content-1"
+      role="region"
+      data-orientation="vertical"
+      class="st-accordion__content overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down">
+      <div class="pb-4 pt-0"><%= description %></div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,55 @@
+<div
+  role="alert"
+  class="<%= alert_classes %> relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4">
+  <!--prettier-ignore-->
+  <% case variant %>
+  <% when :default %>
+  <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">
+    <polyline points="4 17 10 11 4 5"></polyline>
+    <line
+      x1="12"
+      x2="20"
+      y1="19"
+      y2="19"></line>
+  </svg>
+  <% when :error, :alert %>
+  <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">
+    <circle
+      cx="12"
+      cy="12"
+      r="10"></circle>
+    <line
+      x1="12"
+      x2="12"
+      y1="8"
+      y2="12"></line>
+    <line
+      x1="12"
+      x2="12.01"
+      y1="16"
+      y2="16"></line>
+  </svg>
+  <% end %>
+  <h5 class="mb-1 font-medium leading-none tracking-tight"><%= title %></h5>
+  <div class="text-sm [&_p]:leading-relaxed"><%= description %></div>
+</div>

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

@@ -0,0 +1,20 @@
+<div data-controller="ui--dialog">
+  <%= render "components/ui/shared/dialog_background", as: "backdrop" %>
+
+  <%= 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/_badge.html.erb

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

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

@@ -0,0 +1,11 @@
+<!--prettier-ignore-->
+<% case as %>
+<% when :link %>
+ <%= link_to href, class: button_classes, data: data do %>
+    <%= text %>
+  <% end %>
+<% when :button %>
+  <%= button_tag class: button_classes, data: data do %>
+    <%= text %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,13 @@
+<div class="rounded-lg border bg-card text-card-foreground shadow-sm w-[350px]">
+  <% if title || subtitle %>
+  <div class="flex flex-col space-y-1.5 p-6">
+    <% if title %>
+    <h3 class="text-2xl font-semibold leading-none tracking-tight"><%= title %></h3>
+    <% end %> <% if subtitle %>
+    <p class="text-sm text-muted-foreground"><%= subtitle %></p>
+    <% end %>
+  </div>
+  <% end %>
+  <div class="p-0 <%= "p-6 pt-0" if !block && title  %> <%= "p-6" if !block && !title  %> "><%= body %></div>
+  <% if footer %><footer class="mx-6 mb-6"><%= footer %></footer><% end %>
+</div>

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

@@ -0,0 +1,37 @@
+<div data-controller="ui--checkbox">
+  <div class="flex items-center space-x-2">
+    <button
+      type="button"
+      role="checkbox"
+      aria-checked="false"
+      data-state="unchecked"
+      value="on"
+      class="peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
+      for="<%= name %>"
+      data-action="click->ui--checkbox#toggle">
+      <span
+        class="flex items-center justify-center text-current hidden"
+        style="pointer-events: none">
+        <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">
+          <polyline points="20 6 9 17 4 12"></polyline>
+        </svg>
+      </span>
+    </button>
+    <label
+      for="<%= name %>"
+      data-action="click->ui--checkbox#toggle"
+      class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+      <%= label %>
+    </label>
+  </div>
+</div>

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

@@ -0,0 +1,38 @@
+<div
+  data-state="closed"
+  class="w-[350px] space-y-2"
+  data-controller="ui--collapsible">
+  <div
+    class="flex items-center justify-between space-x-4 px-4"
+    data-action="click->ui--collapsible#toggle">
+    <h4 class="text-sm font-semibold"><%= trigger %></h4>
+    <button
+      class="inline-flex items-center justify-center 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 hover:bg-accent hover:text-accent-foreground h-9 rounded-md w-9 p-0"
+      type="button"
+      aria-expanded="false"
+      data-state="closed">
+      <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">
+        <path d="m7 15 5 5 5-5"></path>
+        <path d="m7 9 5-5 5 5"></path>
+      </svg>
+      <span class="sr-only">Toggle</span>
+    </button>
+  </div>
+  <%= yield :preview %>
+  <div
+    data-ui--collapsible-target="item"
+    data-state="closed"
+    class="space-y-2 hidden">
+    <%= yield :body %>
+  </div>
+</div>

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

@@ -0,0 +1,69 @@
+<div data-controller="ui--dialog">
+  <div data-action="click->ui--dialog#open"><%= content_for(:dialog_trigger) %></div>
+
+  <%= render "components/ui/shared/dialog_background", as: "modal" %>
+
+  <div
+    role="dialog"
+    data-state="closed"
+    data-ui--dialog-target="dialog"
+    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 sm:max-w-[425px]"
+    tabindex="-1"
+    style="pointer-events: auto">
+      <div><%= content_for(:dialog_content) %></div>
+      <button
+        data-ui--dialog-target="closeButton"
+        type="button"
+        class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="h-4 w-4">
+          <line
+            x1="18"
+            x2="6"
+            y1="6"
+            y2="18"></line>
+          <line
+            x1="6"
+            x2="18"
+            y1="6"
+            y2="18"></line>
+        </svg>
+        <span class="sr-only">Close</span>
+      </button>
+  </div>
+</div>
+<!-- <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/_dropdown_menu.html.erb

@@ -0,0 +1,9 @@
+<%= render_popover do %>
+  <%= popover_trigger do %>
+    <%= content_for(:dropdown_menu_trigger) %>
+  <% end %>
+  <%= popover_content class: "p-1 w-56" do %>
+    <% if content_for?(:dropdown_menu_label) %><div class="px-2 py-1.5 text-sm font-semibold"><%= content_for(:dropdown_menu_label) %></div><% end %>
+    <%= content_for(:dropdown_menu_content) %>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,18 @@
+<div data-controller="ui--hover-card">
+  <div class="hover_card-trigger"
+       data-ui--hover-card-target="trigger">
+    <%= content_for(:hover_card_trigger) %>
+  </div>
+
+  <div class="hover_card-wrapper" data-ui--hover-card-target="wrapper">
+    <div data-side="bottom"
+         data-ui--hover-card-target="content"
+         data-align="center"
+         data-state="closed"
+         role="dialog"
+         class="hidden z-50 rounded-md border bg-hover_card p-4 text-hover_card-foreground shadow-md outline-none <%= content_for(:hover_card_content_class) %>"
+         tabindex="-1">
+      <%= content_for(:hover_card_content) %>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,19 @@
+<div data-controller="ui--popover">
+  <div class="popover-trigger" data-ui--popover-target="trigger" data-action="click->ui--popover#toggle">
+    <%= content_for(:popover_trigger) %>
+  </div>
+
+  <div class="popover-wrapper" data-ui--popover-target="wrapper">
+    <div
+      date-side="bottom"
+      data-controller="ui--transition"
+      data-ui--popover-target="content"
+      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) %>"
+      tabindex=" -1 ">
+      <%= content_for(:popover_content) %>
+    </div>
+  </div>
+</div>

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

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

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

@@ -0,0 +1,9 @@
+<textarea
+  class="flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background 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 <%= options[:class] %>"
+  placeholder="<%= options[:placeholder] %>"
+  name="<%= name %>"
+  id="<% id %>"
+  <%= options[:disabled] ? "disabled" : "" %>"
+  <%= options[:required] ? "required" : "" %>
+  <%= options[:readonly] ? "readonly" : "" %>
+  <%= options[:rows] ? "rows" : "" %>></textarea>

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

@@ -0,0 +1,34 @@
+<div role="region" aria-label="Notifications (F8)" tabindex="-1" style="" data-controller="ui--toast #{data[:controller]}">
+  <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"
+      aria-live="off"
+      aria-atomic="true"
+      tabindex="0"
+      data-state="closed"
+      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
+            justify-between space-x-4 overflow-hidden rounded-md p-6 pr-8 shadow-lg
+             transition-all
+             data-[swipe=cancel]:translate-x-0
+             data-[swipe=move]:transition-none
+             data-[state=open]:animate-in
+             data-[state=closed]:animate-out
+             data-[swipe=end]:animate-out
+             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"
+      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>
+    </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>
+</div>

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

@@ -0,0 +1,3 @@
+<%= render_button(content,
+  variant: :ghost, data: {controller: "ui--toggle", action: "ui--toggle#toggle"},
+  class: "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground") %>

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

@@ -0,0 +1,18 @@
+<div data-controller="ui--tooltip">
+  <div class="tooltip-trigger"
+       data-ui--tooltip-target="trigger">
+    <%= content_for(:tooltip_trigger) %>
+  </div>
+
+  <div class="tooltip-wrapper" data-ui--tooltip-target="wrapper">
+    <div data-side="top"
+         data-ui--tooltip-target="content"
+         data-align="center"
+         data-state="closed"
+         role="dialog"
+         class="hidden z-50 rounded-md border bg-tooltip p-4 text-tooltip-foreground shadow-md outline-none <%= content_for(:tooltip_content_class) %>"
+         tabindex="-1">
+      <%= content_for(:tooltip_content) %>
+    </div>
+  </div>
+</div>

data/app/views/components/ui/shared/_dialog_background.html.erb

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

data/app/views/components/ui/shared/_menu_item.html.erb

@@ -0,0 +1,6 @@
+<div
+  role="menuitem"
+  class="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground  focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+  data-orientation="vertical">
+  <%= content %>
+</div>