feat: Initial release v0.1.0 - 52 Leptos ShadCN UI components

examples/leptos/src/default/combobox/combobox_example.rs

@@ -0,0 +1,74 @@
+use leptos::prelude::*;
+use shadcn_ui_leptos_combobox::{Combobox, ComboboxOption};
+
+#[component]
+pub fn ComboboxExample() -> impl IntoView {
+    let (selected_value, set_selected_value) = signal(String::new());
+    
+    // Sample options for the combobox
+    let options = vec![
+        ComboboxOption::new("react", "React"),
+        ComboboxOption::new("vue", "Vue.js"),
+        ComboboxOption::new("angular", "Angular"),
+        ComboboxOption::new("svelte", "Svelte"),
+        ComboboxOption::new("leptos", "Leptos"),
+        ComboboxOption::new("yew", "Yew"),
+        ComboboxOption::new("dioxus", "Dioxus"),
+        ComboboxOption::new("solid", "Solid.js"),
+        ComboboxOption::new("preact", "Preact"),
+        ComboboxOption::new("alpine", "Alpine.js"),
+    ];
+    
+    let handle_change = Callback::new(move |value: String| {
+        set_selected_value.set(value.clone());
+        log::info!("Selected value: {}", value);
+    });
+    
+    view! {
+        <div class="p-8 space-y-6">
+            <div class="space-y-2">
+                <h2 class="text-2xl font-bold">Combobox Example</h2>
+                <p class="text-muted-foreground">
+                    "Select a framework from the dropdown or type to filter options."
+                </p>
+            </div>
+            
+            <div class="space-y-4">
+                <div class="space-y-2">
+                    <label class="text-sm font-medium">"Framework"</label>
+                    <Combobox
+                        value=Signal::derive(move || selected_value.get())
+                        on_change=handle_change
+                        placeholder="Select a framework..."
+                        options=options
+                    />
+                </div>
+                
+                <div class="p-4 bg-muted rounded-md">
+                    <p class="text-sm">
+                        <span class="font-medium">"Selected: "</span>
+                        {move || {
+                            let value = selected_value.get();
+                            if value.is_empty() {
+                                "None".to_string()
+                            } else {
+                                value
+                            }
+                        }}
+                    </p>
+                </div>
+            </div>
+            
+            <div class="space-y-4">
+                <h3 class="text-lg font-semibold">"Features Demonstrated:"</h3>
+                <ul class="list-disc list-inside space-y-1 text-sm text-muted-foreground">
+                    <li>"Keyboard navigation (Arrow keys, Enter, Escape)"</li>
+                    <li>"Type to filter options"</li>
+                    <li>"Click to select options"</li>
+                    <li>"Accessible focus management"</li>
+                    <li>"Responsive design"</li>
+                </ul>
+            </div>
+        </div>
+    }
+}