ruby_ui 1.0.1 → 1.1.0

data/lib/ruby_ui/dropdown_menu/dropdown_menu_controller.js

@@ -1,5 +1,11 @@
 import { Controller } from "@hotwired/stimulus";
-import { computePosition, flip, shift, offset } from "@floating-ui/dom";
+import {
+  computePosition,
+  flip,
+  shift,
+  offset,
+  autoUpdate,
+} from "@floating-ui/dom";
 
 export default class extends Controller {
   static targets = ["trigger", "content", "menuItem"];
@@ -12,17 +18,34 @@ export default class extends Controller {
       type: Object,
       default: {},
     },
-  }
+  };
 
   connect() {
     this.boundHandleKeydown = this.#handleKeydown.bind(this); // Bind the function so we can remove it later
     this.selectedIndex = -1;
+
+    this.#setupAutoUpdate();
+  }
+
+  disconnect() {
+    if (this.autoUpdateCleanup) {
+      this.autoUpdateCleanup();
+    }
+  }
+
+  #setupAutoUpdate() {
+    this.autoUpdateCleanup = autoUpdate(
+      this.triggerTarget,
+      this.contentTarget,
+      this.#computeTooltip.bind(this),
+    );
   }
 
   #computeTooltip() {
     computePosition(this.triggerTarget, this.contentTarget, {
       placement: this.optionsValue.placement || "top",
       middleware: [flip(), shift(), offset(8)],
+      strategy: this.optionsValue.strategy || "absolute",
     }).then(({ x, y }) => {
       Object.assign(this.contentTarget.style, {
         left: `${x}px`,
@@ -40,14 +63,16 @@ export default class extends Controller {
   }
 
   toggle() {
-    this.contentTarget.classList.contains("hidden") ? this.#open() : this.close();
+    this.contentTarget.classList.contains("hidden")
+      ? this.#open()
+      : this.close();
   }
 
   #open() {
     this.openValue = true;
     this.#deselectAll();
     this.#addEventListeners();
-    this.#computeTooltip()
+    this.#computeTooltip();
     this.contentTarget.classList.remove("hidden");
   }
 
@@ -59,15 +84,17 @@ export default class extends Controller {
 
   #handleKeydown(e) {
     // return if no menu items (one line fix for)
-    if (this.menuItemTargets.length === 0) { return; }
+    if (this.menuItemTargets.length === 0) {
+      return;
+    }
 
-    if (e.key === 'ArrowDown') {
+    if (e.key === "ArrowDown") {
       e.preventDefault();
       this.#updateSelectedItem(1);
-    } else if (e.key === 'ArrowUp') {
+    } else if (e.key === "ArrowUp") {
       e.preventDefault();
       this.#updateSelectedItem(-1);
-    } else if (e.key === 'Enter' && this.selectedIndex !== -1) {
+    } else if (e.key === "Enter" && this.selectedIndex !== -1) {
       e.preventDefault();
       this.menuItemTargets[this.selectedIndex].click();
     }
@@ -76,7 +103,7 @@ export default class extends Controller {
   #updateSelectedItem(direction) {
     // Check if any of the menuItemTargets have aria-selected="true" and set the selectedIndex to that index
     this.menuItemTargets.forEach((item, index) => {
-      if (item.getAttribute('aria-selected') === 'true') {
+      if (item.getAttribute("aria-selected") === "true") {
         this.selectedIndex = index;
       }
     });
@@ -99,22 +126,24 @@ export default class extends Controller {
   #toggleAriaSelected(element, isSelected) {
     // Add or remove attribute
     if (isSelected) {
-      element.setAttribute('aria-selected', 'true');
+      element.setAttribute("aria-selected", "true");
     } else {
-      element.removeAttribute('aria-selected');
+      element.removeAttribute("aria-selected");
     }
   }
 
   #deselectAll() {
-    this.menuItemTargets.forEach(item => this.#toggleAriaSelected(item, false));
+    this.menuItemTargets.forEach((item) =>
+      this.#toggleAriaSelected(item, false),
+    );
     this.selectedIndex = -1;
   }
 
   #addEventListeners() {
-    document.addEventListener('keydown', this.boundHandleKeydown);
+    document.addEventListener("keydown", this.boundHandleKeydown);
   }
 
   #removeEventListeners() {
-    document.removeEventListener('keydown', this.boundHandleKeydown);
+    document.removeEventListener("keydown", this.boundHandleKeydown);
   }
 }

data/lib/ruby_ui/dropdown_menu/dropdown_menu_docs.rb

@@ -0,0 +1,212 @@
+# frozen_string_literal: true
+
+class Views::Docs::DropdownMenu < Views::Base
+  def view_template
+    component = "DropdownMenu"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Dropdown Menu", description: "Displays a menu to the user — such as a set of actions or functions — triggered by a button.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          DropdownMenu do
+            DropdownMenuTrigger(class: 'w-full') do
+              Button(variant: :outline) { "Open" }
+            end
+            DropdownMenuContent do
+              DropdownMenuLabel { "My Account" }
+              DropdownMenuSeparator
+              DropdownMenuItem(href: '#') { "Profile" }
+              DropdownMenuItem(href: '#') { "Billing" }
+              DropdownMenuItem(href: '#') { "Team" }
+              DropdownMenuItem(href: '#') { "Subscription" }
+            end
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Placement", description: "If the DropdownMenu conflicts with edge, it will auto-adjust it's placement", context: self) do
+        <<~RUBY
+          div(class: 'grid grid-cols-1 sm:grid-cols-3 gap-4') do
+            # -- TOP --
+            DropdownMenu(options: { placement: 'top' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'top' }
+              end
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
+              end
+            end
+
+            DropdownMenu(options: { placement: 'top-start' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'top-start' }
+              end
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
+              end
+            end
+
+            DropdownMenu(options: { placement: 'top-end' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'top-end' }
+              end
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
+              end
+            end
+
+            # -- BOTTOM --
+            DropdownMenu(options: { placement: 'bottom' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'bottom' }
+              end
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
+              end
+            end
+
+            DropdownMenu(options: { placement: 'bottom-start' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'bottom-start' }
+              end
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
+              end
+            end
+
+            DropdownMenu(options: { placement: 'bottom-end' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'bottom-end' }
+              end
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
+              end
+            end
+
+            # -- LEFT --
+            DropdownMenu(options: { placement: 'left' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'left' }
+              end
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
+              end
+            end
+
+            DropdownMenu(options: { placement: 'left-start' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'left-start' }
+              end
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
+              end
+            end
+
+            DropdownMenu(options: { placement: 'left-end' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'left-end' }
+              end
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
+              end
+            end
+
+            # -- RIGHT --
+            DropdownMenu(options: { placement: 'right' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'right' }
+              end
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
+              end
+            end
+
+            DropdownMenu(options: { placement: 'right-start' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'right-start' }
+              end
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
+              end
+            end
+
+            DropdownMenu(options: { placement: 'right-end' }) do
+              DropdownMenuTrigger(class: 'w-full') do
+                Button(variant: :outline, class: 'w-full justify-center') { 'right-end' }
+              end
+              DropdownMenuContent do
+                DropdownMenuLabel { "My Account" }
+                DropdownMenuSeparator
+                DropdownMenuItem(href: '#') { "Profile" }
+                DropdownMenuItem(href: '#') { "Billing" }
+                DropdownMenuItem(href: '#') { "Team" }
+                DropdownMenuItem(href: '#') { "Subscription" }
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/form/form_docs.rb

@@ -0,0 +1,178 @@
+# frozen_string_literal: true
+
+class Views::Docs::Form < Views::Base
+  def view_template
+    component = "Form"
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Form", description: "Building forms with built-in client-side validations.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          Form(class: "w-2/3 space-y-6") do
+            FormField do
+              FormFieldLabel { "Default error" }
+              Input(placeholder: "Joel Drapper", required: true, minlength: "3") { "Joel Drapper" }
+              FormFieldHint()
+              FormFieldError()
+            end
+            Button(type: "submit") { "Save" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
+        <<~RUBY
+          FormField do
+            FormFieldLabel { "Disabled" }
+            Input(disabled: true, placeholder: "Joel Drapper", required: true, minlength: "3") { "Joel Drapper" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do
+        <<~RUBY
+          FormField do
+            FormFieldLabel { "Aria Disabled" }
+            Input(aria: {disabled: "true"}, placeholder: "Joel Drapper", required: true, minlength: "3") { "Joel Drapper" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Custom error message", context: self) do
+        <<~RUBY
+          Form(class: "w-2/3 space-y-6") do
+            FormField do
+              FormFieldLabel { "Custom error message" }
+              Input(placeholder: "joel@drapper.me", required: true, data_value_missing: "Custom error message")
+              FormFieldError()
+            end
+            Button(type: "submit") { "Save" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Backend error", context: self) do
+        <<~RUBY
+          Form(class: "w-2/3 space-y-6") do
+            FormField do
+              FormFieldLabel { "Backend error" }
+              Input(placeholder: "Joel Drapper", required: true)
+              FormFieldError { "Error from backend" }
+            end
+            Button(type: "submit") { "Save" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Checkbox", context: self) do
+        <<~RUBY
+          Form(class: "w-2/3 space-y-6") do
+            FormField do
+              Checkbox(required: true)
+                label(
+                  class:
+                    "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+                ) { " Accept terms and conditions " }
+              FormFieldError()
+            end
+            Button(type: "submit") { "Save" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Select", context: self) do
+        <<~RUBY
+          Form(class: "w-2/3 space-y-6") do
+            FormField do
+              FormFieldLabel { "Select" }
+              Select do
+                SelectInput(required: true)
+                SelectTrigger do
+                  SelectValue(placeholder: "Select a fruit")
+                end
+                SelectContent() do
+                  SelectGroup do
+                    SelectLabel { "Fruits" }
+                    SelectItem(value: "apple") { "Apple" }
+                    SelectItem(value: "orange") { "Orange" }
+                    SelectItem(value: "banana") { "Banana" }
+                    SelectItem(value: "watermelon") { "Watermelon" }
+                  end
+                end
+              end
+              FormFieldError()
+            end
+            Button(type: "submit") { "Save" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Combobox", context: self) do
+        <<~RUBY
+          Form(class: "w-2/3 space-y-6") do
+            FormField do
+              FormFieldLabel { "Combobox" }
+
+              Combobox do
+                ComboboxTrigger placeholder: "Pick value"
+
+                ComboboxPopover do
+                  ComboboxSearchInput(placeholder: "Pick value or type anything")
+
+                  ComboboxList do
+                    ComboboxEmptyState { "No result" }
+
+                    ComboboxListGroup label: "Fruits" do
+                      ComboboxItem do
+                        ComboboxRadio(name: "food", value: "apple", required: true)
+                        span { "Apple" }
+                      end
+
+                      ComboboxItem do
+                        ComboboxRadio(name: "food", value: "banana", required: true)
+                        span { "Banana" }
+                      end
+                    end
+
+                    ComboboxListGroup label: "Vegetable" do
+                      ComboboxItem do
+                        ComboboxRadio(name: "food", value: "brocoli", required: true)
+                        span { "Broccoli" }
+                      end
+
+                      ComboboxItem do
+                        ComboboxRadio(name: "food", value: "carrot", required: true)
+                        span { "Carrot" }
+                      end
+                    end
+
+                    ComboboxListGroup label: "Others" do
+                      ComboboxItem do
+                        ComboboxRadio(name: "food", value: "chocolate", required: true)
+                        span { "Chocolate" }
+                      end
+
+                      ComboboxItem do
+                        ComboboxRadio(name: "food", value: "milk", required: true)
+                        span { "Milk" }
+                      end
+                    end
+                  end
+                end
+              end
+
+              FormFieldError()
+            end
+            Button(type: "submit") { "Save" }
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+end

data/lib/ruby_ui/form/form_field.rb

@@ -13,7 +13,7 @@ module RubyUI
         data: {
           controller: "ruby-ui--form-field"
         },
-        class: "space-y-2"
+        class: "flex flex-col gap-2"
       }
     end
   end

data/lib/ruby_ui/form/form_field_error.rb

@@ -13,7 +13,7 @@ module RubyUI
         data: {
           ruby_ui__form_field_target: "error"
         },
-        class: "text-sm font-medium text-destructive"
+        class: "empty:hidden text-sm font-medium text-destructive"
       }
     end
   end

data/lib/ruby_ui/form/form_field_hint.rb

@@ -9,7 +9,7 @@ module RubyUI
     private
 
     def default_attrs
-      {class: "text-sm text-muted-foreground"}
+      {class: "empty:hidden text-sm text-muted-foreground"}
     end
   end
 end

data/lib/ruby_ui/form/form_field_label.rb

@@ -9,7 +9,13 @@ module RubyUI
     private
 
     def default_attrs
-      {class: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"}
+      {
+        class: [
+          "empty:hidden text-sm font-medium leading-none",
+          "peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+          "peer-aria-disabled:cursor-not-allowed peer-aria-disabled:opacity-70 peer-aria-disabled:pointer-events-none"
+        ]
+      }
     end
   end
 end

data/lib/ruby_ui/hover_card/hover_card_docs.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+class Views::Docs::HoverCard < Views::Base
+  def view_template
+    component = "HoverCard"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Hover Card", description: "For sighted users to preview content available behind a link.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", context: self) do
+        <<~RUBY
+          HoverCard do
+            HoverCardTrigger do
+              Button(variant: :link) { "@joeldrapper" } # Make this a link in order to navigate somewhere
+            end
+            HoverCardContent do
+              div(class: "flex justify-between space-x-4") do
+                Avatar do
+                  AvatarImage(src: "https://avatars.githubusercontent.com/u/246692?v=4", alt: "joeldrapper")
+                  AvatarFallback { "JD" }
+                end
+                div(class: "space-y-1") do
+                  h4(class: "text-sm font-medium") { "@joeldrapper" }
+                  p(class: "text-sm") do
+                    "Creator of Phlex Components. Ruby on Rails developer."
+                  end
+                  div(class: "flex items-center pt-2") do
+                    svg(
+                      width: "15",
+                      height: "15",
+                      viewbox: "0 0 15 15",
+                      fill: "none",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      class: "mr-2 h-4 w-4 opacity-70"
+                    ) do |s|
+                      s.path(
+                        d:
+                          "M4.5 1C4.77614 1 5 1.22386 5 1.5V2H10V1.5C10 1.22386 10.2239 1 10.5 1C10.7761 1 11 1.22386 11 1.5V2H12.5C13.3284 2 14 2.67157 14 3.5V12.5C14 13.3284 13.3284 14 12.5 14H2.5C1.67157 14 1 13.3284 1 12.5V3.5C1 2.67157 1.67157 2 2.5 2H4V1.5C4 1.22386 4.22386 1 4.5 1ZM10 3V3.5C10 3.77614 10.2239 4 10.5 4C10.7761 4 11 3.77614 11 3.5V3H12.5C12.7761 3 13 3.22386 13 3.5V5H2V3.5C2 3.22386 2.22386 3 2.5 3H4V3.5C4 3.77614 4.22386 4 4.5 4C4.77614 4 5 3.77614 5 3.5V3H10ZM2 6V12.5C2 12.7761 2.22386 13 2.5 13H12.5C12.7761 13 13 12.7761 13 12.5V6H2ZM7 7.5C7 7.22386 7.22386 7 7.5 7C7.77614 7 8 7.22386 8 7.5C8 7.77614 7.77614 8 7.5 8C7.22386 8 7 7.77614 7 7.5ZM9.5 7C9.22386 7 9 7.22386 9 7.5C9 7.77614 9.22386 8 9.5 8C9.77614 8 10 7.77614 10 7.5C10 7.22386 9.77614 7 9.5 7ZM11 7.5C11 7.22386 11.2239 7 11.5 7C11.7761 7 12 7.22386 12 7.5C12 7.77614 11.7761 8 11.5 8C11.2239 8 11 7.77614 11 7.5ZM11.5 9C11.2239 9 11 9.22386 11 9.5C11 9.77614 11.2239 10 11.5 10C11.7761 10 12 9.77614 12 9.5C12 9.22386 11.7761 9 11.5 9ZM9 9.5C9 9.22386 9.22386 9 9.5 9C9.77614 9 10 9.22386 10 9.5C10 9.77614 9.77614 10 9.5 10C9.22386 10 9 9.77614 9 9.5ZM7.5 9C7.22386 9 7 9.22386 7 9.5C7 9.77614 7.22386 10 7.5 10C7.77614 10 8 9.77614 8 9.5C8 9.22386 7.77614 9 7.5 9ZM5 9.5C5 9.22386 5.22386 9 5.5 9C5.77614 9 6 9.22386 6 9.5C6 9.77614 5.77614 10 5.5 10C5.22386 10 5 9.77614 5 9.5ZM3.5 9C3.22386 9 3 9.22386 3 9.5C3 9.77614 3.22386 10 3.5 10C3.77614 10 4 9.77614 4 9.5C4 9.22386 3.77614 9 3.5 9ZM3 11.5C3 11.2239 3.22386 11 3.5 11C3.77614 11 4 11.2239 4 11.5C4 11.7761 3.77614 12 3.5 12C3.22386 12 3 11.7761 3 11.5ZM5.5 11C5.22386 11 5 11.2239 5 11.5C5 11.7761 5.22386 12 5.5 12C5.77614 12 6 11.7761 6 11.5C6 11.2239 5.77614 11 5.5 11ZM7 11.5C7 11.2239 7.22386 11 7.5 11C7.77614 11 8 11.2239 8 11.5C8 11.7761 7.77614 12 7.5 12C7.22386 12 7 11.7761 7 11.5ZM9.5 11C9.22386 11 9 11.2239 9 11.5C9 11.7761 9.22386 12 9.5 12C9.77614 12 10 11.7761 10 11.5C10 11.2239 9.77614 11 9.5 11Z",
+                        fill: "currentColor",
+                        fill_rule: "evenodd",
+                        clip_rule: "evenodd"
+                      )
+                    end
+                    span(class: "text-xs text-muted-foreground") { "Joined December 2021" }
+                  end
+                end
+              end
+            end
+          end
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+
+  private
+
+  # def components
+  #   [
+  #     Docs::ComponentStruct.new(name: "PopoverController", source: "https://github.com/PhlexUI/phlex_ui_stimulus/blob/main/controllers/popover_controller.js", built_using: :stimulus),
+  #     Docs::ComponentStruct.new(name: "HoverCard", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/hover_card.rb", built_using: :phlex),
+  #     Docs::ComponentStruct.new(name: "HoverCardTrigger", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/hover_card/trigger.rb", built_using: :phlex),
+  #     Docs::ComponentStruct.new(name: "HoverCardContent", source: "https://github.com/PhlexUI/phlex_ui/blob/main/lib/phlex_ui/hover_card/content.rb", built_using: :phlex)
+  #   ]
+  # end
+end

data/lib/ruby_ui/input/input.rb

@@ -19,7 +19,15 @@ module RubyUI
           ruby_ui__form_field_target: "input",
           action: "input->ruby-ui--form-field#onInput invalid->ruby-ui--form-field#onInvalid"
         },
-        class: "flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 border-border focus-visible:ring-ring placeholder:text-muted-foreground"
+        class: [
+          "flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] border-border ring-0 ring-ring/0",
+          "placeholder:text-muted-foreground",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          "file:border-0 file:bg-transparent file:text-sm file:font-medium",
+          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none",
+          "focus-visible:outline-none focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:border-ring focus-visible:shadow-sm",
+          (@type.to_s == "file") ? "pt-[7px]" : ""
+        ]
       }
     end
   end