### Setup ThemeProvider in Leptos Application

Source: https://context7.com/adoyle0/singlestage-ui/llms.txt

Demonstrates how to wrap your Leptos application with the ThemeProvider component to enable theming, dark mode, and reactive theme switching. It also shows how to access and manipulate the theme context.

```rust
use leptos::prelude::*;
use singlestage::{ThemeProvider, ThemeProviderContext, Mode};

#[component]
fn App() -> impl IntoView {
    view! {
        <ThemeProvider mode="auto">
            <YourAppContent />
        </ThemeProvider>
    }
}

#[component]
fn YourAppContent() -> impl IntoView {
    // Access theme context to control theme
    let theme_ctx = use_context::<ThemeProviderContext>()
        .expect("ThemeProvider must be present");

    let toggle_dark_mode = move |_| {
        theme_ctx.mode.update(|m| {
            *m = match *m {
                Mode::Light => Mode::Dark,
                Mode::Dark => Mode::Light,
                Mode::Auto => Mode::Dark,
            }
        });
    };

    view! {
        <div>
            <button on:click=toggle_dark_mode>"Toggle Theme"</button>
            <p>"Current mode: " {move || format!("{:?}", theme_ctx.mode.get())}</p>
        </div>
    }
}
```

--------------------------------

### Minimal Leptos App with Singlestage Components (Rust)

Source: https://context7.com/adoyle0/singlestage-ui/llms.txt

A basic Leptos application example in Rust that utilizes Singlestage UI components. It shows how to wrap the application with `ThemeProvider` for styling and includes a simple `Button` component. This snippet assumes necessary feature flags are enabled in `Cargo.toml`.

```rust
// Available feature flags (selectively enable):
// accordion, alert, aspect_ratio, avatar, badge, breadcrumb,
// button, button_group, card, carousel, checkbox, context_menu,
// dialog, dropdown, empty, icon, field, input, item, kbd, label,
// link, pagination, popover, progress, radio, scroll_area, select,
// separator, sidebar, skeleton, slider, spinner, switch, table,
// tabs, textarea, theme_provider, toggle, tooltip

// Default feature includes all components
use singlestage::*;

#[component]
fn MinimalApp() -> impl IntoView {
    view! {
        <ThemeProvider>
            <div class="p-4">
                <Button>"Hello World"</Button>
            </div>
        </ThemeProvider>
    }
}

```

--------------------------------

### Modal Dialog with Trigger and Content in Rust

Source: https://context7.com/adoyle0/singlestage-ui/llms.txt

Demonstrates how to create a modal dialog with a trigger button and customizable content using Leptos and Singlestage components. It includes examples for an editable profile dialog and a non-dismissible delete account dialog. Inputs and outputs are handled via reactive signals.

```rust
use leptos::prelude::*;
use singlestage::{
    Dialog,
    DialogTrigger,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogDescription,
    DialogFooter,
    DialogClose,
    Button,
    Input,
    Label,
    Reactive
};

#[component]
fn DialogDemo() -> impl IntoView {
    let is_open = RwSignal::new(false);
    let profile_name = Reactive::new("Pedro Duarte".to_string());
    let username = Reactive::new("@peduarte".to_string());

    let save_profile = move |_| {
        logging::log!("Saving profile: {} ({})", profile_name.get(), username.get());
        is_open.set(false);
    };

    view! {
        <div>
            // Dialog with trigger button
            <Dialog open=is_open.into()> // Uses RwSignal for open state
                <DialogTrigger slot> // Button to open the dialog
                    <Button variant="outline">"Edit Profile"</Button>
                </DialogTrigger>

                <DialogClose /> // Button to close the dialog

                <DialogHeader> // Header section of the dialog
                    <DialogTitle>"Edit profile"</DialogTitle>
                    <DialogDescription>
                        "Make changes to your profile here. Click save when you're done."
                    </DialogDescription>
                </DialogHeader>

                <DialogContent> // Main content of the dialog
                    <form class="grid gap-4">
                        <div class="grid gap-3">
                            <Label label_for="name">"Name"</Label>
                            <Input
                                value=profile_name // Binds input to reactive signal
                                id="name"
                                autofocus=true
                            />
                        </div>
                        <div class="grid gap-3">
                            <Label label_for="username">"Username"</Label>
                            <Input value=username id="username" /> // Binds input to reactive signal
                        </div>
                    </form>
                </DialogContent>

                <DialogFooter> // Footer section with action buttons
                    <Button
                        variant="outline"
                        on:click=move |_| is_open.set(false) // Cancel button
                    >
                        "Cancel"
                    </Button>
                    <Button on:click=save_profile>"Save changes"</Button> // Save button
                </DialogFooter>
            </Dialog>

            // Alert dialog (non-dismissible)
            <Dialog alert=true> // 'alert=true' makes it non-dismissible
                <DialogTrigger slot>
                    <Button variant="destructive">"Delete Account"</Button>
                </DialogTrigger>

                <DialogHeader>
                    <DialogTitle>"Are you sure?"</DialogTitle>
                    <DialogDescription>
                        "This action cannot be undone. This will permanently delete your account."
                    </DialogDescription>
                </DialogHeader>

                <DialogFooter>
                    <Button variant="outline">"Cancel"</Button>
                    <Button variant="destructive">"Delete"</Button>
                </DialogFooter>
            </Dialog>
        </div>
    }
}

```

--------------------------------

### Add Singlestage UI with Feature Flags

Source: https://context7.com/adoyle0/singlestage-ui/llms.txt

Demonstrates how to add the Singlestage UI library to your project's dependencies, enabling only specific components to reduce the overall binary size. This is crucial for performance-sensitive applications.

```toml
[dependencies]
singlestage = { version = "0.3", default-features = false, features = [
    "button",
    "input",
    "checkbox",
    "dialog",
    "theme_provider"
] }
```

--------------------------------

### Add Singlestage to Cargo.toml (Standard)

Source: https://github.com/adoyle0/singlestage-ui/blob/main/README.md

This snippet shows how to add the singlestage library and its dependency on Leptos to your project's Cargo.toml file for standard usage.

```toml
# Cargo.toml

[dependencies]
leptos = "0.8"
...
singlestage = "0.3"

```

--------------------------------

### Configure Islands Architecture for Leptos and Singlestage

Source: https://context7.com/adoyle0/singlestage-ui/llms.txt

Configures your project to use the 'islands' architecture by enabling the respective features in Leptos and singlestage dependencies.

```toml
[dependencies]
leptos = { version = "0.8", features = ["islands"] }
singlestage = { version = "0.3", features = ["islands"] }
```

--------------------------------

### Add Singlestage Dependency to Leptos Project

Source: https://context7.com/adoyle0/singlestage-ui/llms.txt

Shows how to add the singlestage dependency to your Leptos project's Cargo.toml file for standard usage.

```toml
[dependencies]
leptos = "0.8"
singlestage = "0.3"
```

--------------------------------

### Add Singlestage to Cargo.toml (Nightly)

Source: https://github.com/adoyle0/singlestage-ui/blob/main/README.md

Illustrates adding singlestage with the 'nightly' feature, mirroring the Leptos 'nightly' feature, for projects utilizing Rust nightly toolchains.

```toml
# Cargo.toml
[dependencies]
leptos = { version = "0.8", features = ["nightly"] }
...
singlestage = {version = "0.3", features = ["nightly"] }

```

--------------------------------

### Create Buttons with Variants and Sizes in Leptos

Source: https://context7.com/adoyle0/singlestage-ui/llms.txt

Illustrates the usage of the Button component from Singlestage UI, showcasing different variants (primary, secondary, outline, etc.), sizes (small, large, icon), disabled states, and event handling.

```rust
use leptos::prelude::*;
use singlestage::Button;

#[component]
fn ButtonDemo() -> impl IntoView {
    let handle_click = move |_| {
        logging::log!("Button clicked!");
    };

    view! {
        <div class="flex gap-4 flex-wrap">
            // Variant examples
            <Button variant="primary">"Primary"</Button>
            <Button variant="secondary">"Secondary"</Button>
            <Button variant="outline">"Outline"</Button>
            <Button variant="ghost">"Ghost"</Button>
            <Button variant="link">"Link"</Button>
            <Button variant="destructive">"Destructive"</Button>

            // Size examples
            <Button size="small">"Small"</Button>
            <Button size="large">"Large"</Button>
            <Button size="icon">"+"</Button>

            // Disabled state
            <Button disabled=true>"Disabled"</Button>

            // With event handler
            <Button on:click=handle_click>"Click Me"</Button>

            // Custom button type
            <Button button_type="button">"Type Button"</Button>
            <Button button_type="submit">"Submit Form"</Button>
        </div>
    }
}
```

--------------------------------

### Reactive Wrapper for Component Props in Rust

Source: https://context7.com/adoyle0/singlestage-ui/llms.txt

Illustrates how to use the `Reactive` wrapper from `singlestage` to manage component props in Rust using Leptos. It shows three ways to initialize `Reactive`: with a direct value, an existing `RwSignal`, or a simple boolean, demonstrating their interchangeability as component inputs.

```rust
use leptos::prelude::*;
use singlestage::{Reactive, Checkbox};

#[component]
fn ReactiveDemo() -> impl IntoView {
    // Three ways to use Reactive:

    // 1. Direct value - auto-converted to RwSignal
    let checked1 = Reactive::new(false);

    // 2. Existing RwSignal - coupled to component
    let signal = RwSignal::new(true);
    let checked2: Reactive<bool, RwSignal<bool>> = signal.into();

    // 3. Simple boolean passed directly
    let checked3 = false.into(); // Implicitly converts to Reactive<bool, ()>

    // All three can be used interchangeably as props
    view! {
        <div class="space-y-2">
            <Checkbox checked=checked1>"Option 1"</Checkbox> // Uses Reactive<bool, ()>
            <Checkbox checked=checked2>"Option 2 (from signal)"</Checkbox> // Uses Reactive<bool, RwSignal<bool>>
            <Checkbox checked=checked3>"Option 3 (from bool)"</Checkbox> // Uses Reactive<bool, ()>

            // Reading and updating reactive values
            <button on:click=move |_| {
                checked1.set(!checked1.get()); // Updates underlying RwSignal
                signal.set(!signal.get());     // Updates the original RwSignal
            }>
                "Toggle Options"
            </button>

            // Displaying current states
            <p>"Option 1: " {move || checked1.get().to_string()}</p>
            <p>"Option 2: " {move || signal.get().to_string()}</p>
        </div>
    }
}

```

--------------------------------

### Configure Tailwind BYOB with Cargo Leptos Watch

Source: https://github.com/adoyle0/singlestage-ui/blob/main/README.md

This bash command shows how to set the SINGLESTAGE_TAILWIND_PATH environment variable to specify a custom Tailwind CSS binary path when running `cargo leptos watch`.

```bash
SINGLESTAGE_TAILWIND_PATH=/path/to/tailwindcss cargo leptos watch

```

--------------------------------

### Add Singlestage to Cargo.toml (Islands)

Source: https://github.com/adoyle0/singlestage-ui/blob/main/README.md

Demonstrates enabling the 'islands' feature for singlestage, similar to Leptos' 'islands' feature, for applications employing the islands architecture.

```toml
# Cargo.toml

[dependencies]
leptos = { version = "0.8", features = ["islands"] }
...
singlestage = {version = "0.3", features = ["islands"] }

```

--------------------------------

### Form Input with Reactive Value Binding in Rust

Source: https://context7.com/adoyle0/singlestage-ui/llms.txt

Demonstrates creating a form with various input fields (username, email, password, readonly) using Leptos and Singlestage's Input component. It showcases reactive state binding for input values and form submission handling with basic validation.

```rust
use leptos::prelude::*;
use singlestage::{Input, Reactive};

#[component]
fn InputDemo() -> impl IntoView {
    let username = Reactive::new(String::new());
    let email = Reactive::new(String::new());
    let password = Reactive::new(String::new());
    let is_invalid = RwSignal::new(false);

    let submit_form = move |ev: leptos::ev::SubmitEvent| {
        ev.prevent_default();
        logging::log!("Username: {}", username.get());
        logging::log!("Email: {}", email.get());

        // Validate and show error
        if username.get().len() < 3 {
            is_invalid.set(true);
        } else {
            is_invalid.set(false);
        }
    };

    view! {
        <form on:submit=submit_form class="space-y-4 max-w-md">
            // Basic input with label
            <Input
                value=username
                placeholder="Enter username"
                invalid=is_invalid.into()
            >
                "Username"
            </Input>

            // Email input
            <Input
                value=email
                input_type="email"
                placeholder="you@example.com"
                required=true
            >
                "Email"
            </Input>

            // Password input
            <Input
                value=password
                input_type="password"
                placeholder="Enter password"
                minlength=8
            >
                "Password"
            </Input>

            // Disabled input
            <Input value="Readonly Value" disabled=true />

            <button type="submit">"Submit"</button>
        </form>
    }
}
```

--------------------------------

### Set Custom Tailwind CSS Binary Path

Source: https://context7.com/adoyle0/singlestage-ui/llms.txt

Configures the path to the custom Tailwind CSS binary for Singlestage UI. This is used during the development watch process.

```bash
# Set custom tailwind binary path
SINGLESTAGE_TAILWIND_PATH=/path/to/tailwindcss cargo leptos watch
```

--------------------------------

### Rust Dropdown Selection with Options

Source: https://context7.com/adoyle0/singlestage-ui/llms.txt

Implements a dropdown selection component in Rust using the Leptos framework. It allows users to select options from a list, supporting placeholders, default values, and required fields. It depends on the 'leptos' and 'singlestage' crates.

```rust
use leptos::prelude::*;
use singlestage::{Select, SelectItem, SelectContent, Reactive};

#[component]
fn SelectDemo() -> impl IntoView {
    let selected_country = Reactive::new(String::new());
    let selected_plan = Reactive::new("free".to_string());

    view! {
        <div class="space-y-4 max-w-md">
            // Select with placeholder
            <Select
                value=selected_country
                placeholder="Select a country"
            >
                <SelectContent>
                    <SelectItem value="us">"United States"</SelectItem>
                    <SelectItem value="uk">"United Kingdom"</SelectItem>
                    <SelectItem value="ca">"Canada"</SelectItem>
                    <SelectItem value="au">"Australia"</SelectItem>
                </SelectContent>
            </Select>

            // Select with default value
            <Select
                value=selected_plan
                default="free"
            >
                <SelectContent>
                    <SelectItem value="free">"Free Plan"</SelectItem>
                    <SelectItem value="pro">"Pro Plan"</SelectItem>
                    <SelectItem value="enterprise">"Enterprise Plan"</SelectItem>
                </SelectContent>
            </Select>

            // Required select
            <Select
                value=Reactive::new(String::new())
                required=true
                placeholder="Required selection"
            >
                <SelectContent>
                    <SelectItem value="option1">"Option 1"</SelectItem>
                    <SelectItem value="option2">"Option 2"</SelectItem>
                </SelectContent>
            </Select>

            // Display selected values
            <div class="mt-4 space-y-2">
                <p>"Selected country: " {move || selected_country.get()}</p>
                <p>"Selected plan: " {move || selected_plan.get()}</p>
            </div>
        </div>
    }
}
```

--------------------------------

### Interactive Checkboxes with Reactive State in Rust

Source: https://context7.com/adoyle0/singlestage-ui/llms.txt

Illustrates the use of the Checkbox component from Singlestage within a Leptos application. It demonstrates how to manage the checked state of multiple checkboxes reactively and derive logic based on their states, such as enabling a submit button.

```rust
use leptos::prelude::*;
use singlestage::{Checkbox, Reactive};

#[component]
fn CheckboxDemo() -> impl IntoView {
    let accept_terms = Reactive::new(false);
    let subscribe = Reactive::new(false);
    let notifications = Reactive::new(true);

    let can_submit = move || {
        accept_terms.get() && subscribe.get()
    };

    view! {
        <div class="space-y-4">
            // Basic checkbox with label
            <Checkbox checked=accept_terms>
                "Accept terms and conditions"
            </Checkbox>

            // Another checkbox
            <Checkbox checked=subscribe>
                "Subscribe to newsletter"
            </Checkbox>

            // Checkbox with default checked state
            <Checkbox checked=notifications>
                "Enable notifications"
            </Checkbox>

            // Disabled checkbox
            <Checkbox disabled=true checked=Reactive::new(true)>
                "Disabled option"
            </Checkbox>

            // Display state
            <div class="mt-4">
                <p>"Can submit: " {move || can_submit().to_string()}</p>
                <p>"Terms accepted: " {move || accept_terms.get().to_string()}</p>
                <p>"Subscribed: " {move || subscribe.get().to_string()}</p>
            </div>
        </div>
    }
}
```

--------------------------------

### Enable Nightly Features for Leptos and Singlestage

Source: https://context7.com/adoyle0/singlestage-ui/llms.txt

Enables the 'nightly' feature for both Leptos and singlestage in your Cargo.toml, required for certain advanced features or development builds.

```toml
[dependencies]
leptos = { version = "0.8", features = ["nightly"] }
singlestage = { version = "0.3", features = ["nightly"] }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.