ruby_ui 1.0.2 → 1.2.0

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

@@ -11,7 +11,7 @@ module RubyUI
     def default_attrs
       {
         class: [
-          "text-sm font-medium leading-none",
+          "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"
         ]

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

@@ -20,12 +20,13 @@ module RubyUI
           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 border-border",
+          "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",
-          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring",
-          "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 aria-disabled:pointer-events-none"
+          "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

data/lib/ruby_ui/input/input_docs.rb

@@ -0,0 +1,68 @@
+# frozen_string_literal: true
+
+class Views::Docs::Input < Views::Base
+  def view_template
+    component = "Input"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Input", description: "Displays a form input field or a component that looks like an input field.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Email", context: self) do
+        <<~RUBY
+          div(class: 'grid w-full max-w-sm items-center gap-1.5') do
+            Input(type: "email", placeholder: "Email")
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "File", context: self) do
+        <<~RUBY
+          div(class: "grid w-full max-w-sm items-center gap-1.5") do
+            label(for: "picture") { "Picture" }
+            Input(type: "file", id: "picture")
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
+        <<~RUBY
+          div(class: 'grid w-full max-w-sm items-center gap-1.5') do
+            Input(disabled: true, type: "email", placeholder: "Email")
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do
+        <<~RUBY
+          div(class: 'grid w-full max-w-sm items-center gap-1.5') do
+            Input(aria: {disabled: "true"}, type: "email", placeholder: "Email")
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "With label", context: self) do
+        <<~RUBY
+          div(class: 'grid w-full max-w-sm items-center gap-1.5') do
+            label(for: "email1") { "Email" }
+            Input(type: "email", placeholder: "Email", id: "email1")
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "With button", context: self) do
+        <<~RUBY
+          div(class: 'flex w-full max-w-sm items-center space-x-2') do
+            Input(type: "email", placeholder: "Email")
+            Button { "Subscribe" }
+          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/link/link_docs.rb

@@ -0,0 +1,106 @@
+# frozen_string_literal: true
+
+class Views::Docs::Link < Views::Base
+  def view_template
+    component = "Link"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "Link", description: "Displays a link that looks like a button or underline link.")
+
+      Heading(level: 2) { "Usage" }
+
+      render Docs::VisualCodeExample.new(title: "Example", description: "This is the default appearance of a Link", context: self) do
+        <<~RUBY
+          Link(href: "#") { "Link" }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Aria Disabled", context: self) do
+        <<~RUBY
+          Link(aria: {disabled: "true"}, href: "#") { "Link" }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Primary", description: "This is the primary variant of a Link", context: self) do
+        <<~RUBY
+          Link(href: "#", variant: :primary) { "Primary" }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Secondary", description: "This is the secondary variant of a Link", context: self) do
+        <<~RUBY
+          Link(href: "#", variant: :secondary) { "Secondary" }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Destructive", description: "This is the destructive variant of a Link", context: self) do
+        <<~RUBY
+          Link(href: "#", variant: :destructive) { "Destructive" }
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Icon", description: "This is the icon variant of a Link", context: self) do
+        <<~RUBY
+          Link(href: "#", variant: :outline, icon: true) do
+            chevron_icon
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "With Icon", description: "This is the primary variant of a Link with an icon", context: self) do
+        <<~RUBY
+          Link(href: "#", variant: :primary) do
+            email_icon
+            span { "Login with Email" }
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Ghost", description: "This is the ghost variant of a Link", context: self) do
+        <<~RUBY
+          Link(href: "#", variant: :ghost) { "Ghost" }
+        RUBY
+      end
+
+      render Components::ComponentSetup::Tabs.new(component_name: component)
+
+      render Docs::ComponentsTable.new(component_files(component))
+    end
+  end
+
+  private
+
+  def chevron_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      viewbox: "0 0 20 20",
+      fill: "currentColor",
+      class: "w-5 h-5"
+    ) do |s|
+      s.path(
+        fill_rule: "evenodd",
+        d:
+          "M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z",
+        clip_rule: "evenodd"
+      )
+    end
+  end
+
+  def email_icon
+    svg(
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewbox: "0 0 24 24",
+      stroke_width: "1.5",
+      stroke: "currentColor",
+      class: "w-4 h-4 mr-2"
+    ) do |s|
+      s.path(
+        stroke_linecap: "round",
+        stroke_linejoin: "round",
+        d:
+          "M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75"
+      )
+    end
+  end
+end

data/lib/ruby_ui/masked_input/masked_input.rb

@@ -2,8 +2,18 @@
 
 module RubyUI
   class MaskedInput < Base
+    def initialize(save_unmasked: false, **attrs)
+      @save_unmasked = save_unmasked
+      super(**attrs)
+    end
+
     def view_template
-      Input(type: "text", **attrs)
+      if @save_unmasked
+        Input(type: "text", **attrs.merge(name: "#{attrs[:name]}-masked"))
+        input(type: "hidden", name: attrs[:name], value: attrs[:value])
+      else
+        Input(type: "text", **attrs)
+      end
     end
 
     private

data/lib/ruby_ui/masked_input/masked_input_controller.js

@@ -5,5 +5,18 @@ import { MaskInput } from "maska";
 export default class extends Controller {
   connect() {
     new MaskInput(this.element)
+    this.#boundSync = this.#sync.bind(this);
+    this.element.addEventListener("maska", this.#boundSync);
+  }
+
+  disconnect() {
+    this.element.removeEventListener("maska", this.#boundSync);
+  }
+
+  #boundSync = null;
+
+  #sync(event) {
+    const hidden = this.element.nextElementSibling;
+    if (hidden?.type === "hidden") hidden.value = event.detail.unmasked;
   }
 }

data/lib/ruby_ui/masked_input/masked_input_docs.rb

@@ -0,0 +1,47 @@
+# frozen_string_literal: true
+
+class Views::Docs::MaskedInput < Views::Base
+  def view_template
+    component = "MaskedInput"
+
+    div(class: "max-w-2xl mx-auto w-full py-10 space-y-10") do
+      render Docs::Header.new(title: "MaskedInput", description: "Displays a form input field with applied mask.")
+
+      Heading(level: 2) { "Usage" }
+
+      Text do
+        plain "For advanced usage, check out the "
+        InlineLink(href: "https://beholdr.github.io/maska/v3", target: "_blank") { "Maska website" }
+        plain "."
+      end
+
+      render Docs::VisualCodeExample.new(title: "Phone number", context: self) do
+        <<~RUBY
+          div(class: 'grid w-full max-w-sm items-center gap-1.5') do
+            MaskedInput(data: {maska: "(##) #####-####"})
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "Hex color code", context: self) do
+        <<~RUBY
+          div(class: 'grid w-full max-w-sm items-center gap-1.5') do
+            MaskedInput(data: {maska: "!#HHHHHH", maska_tokens: "H:[0-9a-fA-F]"})
+          end
+        RUBY
+      end
+
+      render Docs::VisualCodeExample.new(title: "CPF / CNPJ", context: self) do
+        <<~RUBY
+          div(class: 'grid w-full max-w-sm items-center gap-1.5') do
+            MaskedInput(data: {maska: "['###.###.###-##', '##.###.###/####-##']"})
+          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/native_select/native_select.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+module RubyUI
+  class NativeSelect < Base
+    def initialize(size: :default, **attrs)
+      @size = size
+      super(**attrs)
+    end
+
+    def view_template(&block)
+      div(
+        class: "group/native-select relative w-fit has-[select:disabled]:opacity-50"
+      ) do
+        select(**attrs, &block)
+        render RubyUI::NativeSelectIcon.new
+      end
+    end
+
+    private
+
+    def default_attrs
+      {
+        data: {
+          ruby_ui__form_field_target: "input",
+          action: "change->ruby-ui--form-field#onChange invalid->ruby-ui--form-field#onInvalid"
+        },
+        class: [
+          "border-border bg-transparent text-sm w-full min-w-0 appearance-none rounded-md border py-1 pr-8 pl-2.5 shadow-xs transition-[color,box-shadow] outline-none select-none ring-0 ring-ring/0",
+          "placeholder:text-muted-foreground",
+          "selection:bg-primary selection:text-primary-foreground",
+          "focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-2",
+          "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+          "aria-invalid:ring-destructive/20 aria-invalid:border-destructive aria-invalid:ring-2",
+          (@size == :sm) ? "h-7 rounded-md py-0.5" : "h-9"
+        ]
+      }
+    end
+  end
+end