docs: match shadcn native-select examples

Update docs to match the original shadcn native-select page:
Default, Groups, Disabled, Invalid examples with descriptions.
Add Native Select vs Select comparison section.

Author: djalmaaraujo

lib/ruby_ui/native_select/native_select_docs.rb

@@ -23,7 +23,7 @@ def view_template
         RUBY
       end
 
-      render Docs::VisualCodeExample.new(title: "With groups", context: self) do
+      render Docs::VisualCodeExample.new(title: "Groups", description: "Use NativeSelectGroup to organize options into categories.", context: self) do
         <<~RUBY
           div(class: "grid w-full max-w-sm items-center gap-1.5") do
             NativeSelect do
@@ -42,30 +42,39 @@ def view_template
         RUBY
       end
 
-      render Docs::VisualCodeExample.new(title: "Small", context: self) do
+      render Docs::VisualCodeExample.new(title: "Disabled", description: "Add the disabled attribute to the NativeSelect component to disable the select.", context: self) do
         <<~RUBY
           div(class: "grid w-full max-w-sm items-center gap-1.5") do
-            NativeSelect(size: :sm) do
+            NativeSelect(disabled: true) do
               NativeSelectOption(value: "") { "Select a fruit" }
               NativeSelectOption(value: "apple") { "Apple" }
               NativeSelectOption(value: "banana") { "Banana" }
+              NativeSelectOption(value: "blueberry") { "Blueberry" }
             end
           end
         RUBY
       end
 
-      render Docs::VisualCodeExample.new(title: "Disabled", context: self) do
+      render Docs::VisualCodeExample.new(title: "Invalid", description: "Use aria-invalid to show validation errors.", context: self) do
         <<~RUBY
           div(class: "grid w-full max-w-sm items-center gap-1.5") do
-            NativeSelect(disabled: true) do
+            NativeSelect(aria: {invalid: "true"}) do
               NativeSelectOption(value: "") { "Select a fruit" }
               NativeSelectOption(value: "apple") { "Apple" }
               NativeSelectOption(value: "banana") { "Banana" }
+              NativeSelectOption(value: "blueberry") { "Blueberry" }
             end
           end
         RUBY
       end
 
+      Heading(level: 2) { "Native Select vs Select" }
+
+      div(class: "space-y-2 text-sm text-muted-foreground") do
+        p { "NativeSelect: Choose for native browser behavior, superior performance, or mobile-optimized dropdowns." }
+        p { "Select: Choose for custom styling, animations, or complex interactions." }
+      end
+
       render Components::ComponentSetup::Tabs.new(component_name: component)
 
       render Docs::ComponentsTable.new(component_files(component))