@page "/components/select"

<PageTitle>Select — Lumeo</PageTitle>

<PageHeader Title="Select" Description="Displays a dropdown list of options for the user to pick from." />

<div class="mt-10 space-y-3">
    <Heading Id="when-to-use" Level="2" Class="scroll-mt-20">When to Use</Heading>
    <ul class="list-disc list-inside space-y-1 text-muted-foreground text-sm">
        <li>Choose one or more options from a predefined list of 5-15 items.</li>
        <li>Replace native select elements with a styled, searchable dropdown.</li>
        <li>Use multi-select mode for tagging, filtering, or assigning multiple values.</li>
    </ul>
</div>

<div class="mt-6">
    <Alert Variant="Alert.AlertVariant.Info" ShowIcon="true">
        <ChildContent>
            For validation, label, and helper text, wrap this input in <code class="font-mono text-xs">&lt;FormField&gt;</code>.
            See <a href="/components/form#validation-pattern" class="underline font-medium">Form &rsaquo; Validation Pattern</a>.
        </ChildContent>
    </Alert>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <Select @bind-Value="_selectedFruit">
                <SelectTrigger>
                    <Text As="span" Class="@(_selectedFruit == null ? "text-muted-foreground" : "")">
                        @(_selectedFruit ?? "Select a fruit")
                    </Text>
                </SelectTrigger>
                <SelectContent>
                    <SelectItem Value="apple">Apple</SelectItem>
                    <SelectItem Value="banana">Banana</SelectItem>
                    <SelectItem Value="cherry">Cherry</SelectItem>
                    <SelectItem Value="grape">Grape</SelectItem>
                    <SelectItem Value="orange">Orange</SelectItem>
                </SelectContent>
            </Select>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="With Binding" Code="@_bindingCode">
        <Stack Gap="2" Class="w-full max-w-sm">
            <Select @bind-Value="_selectedFramework">
                <SelectTrigger>
                    <Text As="span" Class="@(_selectedFramework == null ? "text-muted-foreground" : "")">
                        @(_selectedFramework ?? "Select a framework")
                    </Text>
                </SelectTrigger>
                <SelectContent>
                    <SelectItem Value="blazor">Blazor</SelectItem>
                    <SelectItem Value="react">React</SelectItem>
                    <SelectItem Value="vue">Vue</SelectItem>
                    <SelectItem Value="angular">Angular</SelectItem>
                    <SelectItem Value="svelte">Svelte</SelectItem>
                </SelectContent>
            </Select>
            <Lumeo.Text Size="sm" Color="muted">Selected: @(_selectedFramework ?? "none")</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="With Groups" Code="@_groupCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <Select @bind-Value="_selectedTimezone">
                <SelectTrigger>
                    <Text As="span" Class="@(_selectedTimezone == null ? "text-muted-foreground" : "")">
                        @(_selectedTimezone ?? "Select a timezone")
                    </Text>
                </SelectTrigger>
                <SelectContent>
                    <SelectGroup>
                        <SelectLabel>North America</SelectLabel>
                        <SelectItem Value="est">Eastern (EST)</SelectItem>
                        <SelectItem Value="cst">Central (CST)</SelectItem>
                        <SelectItem Value="pst">Pacific (PST)</SelectItem>
                    </SelectGroup>
                    <SelectGroup>
                        <SelectLabel>Europe</SelectLabel>
                        <SelectItem Value="gmt">Greenwich (GMT)</SelectItem>
                        <SelectItem Value="cet">Central European (CET)</SelectItem>
                        <SelectItem Value="eet">Eastern European (EET)</SelectItem>
                    </SelectGroup>
                </SelectContent>
            </Select>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Searchable" Code="@_searchableCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <Select Searchable="true" @bind-Value="_selectedCountry">
                <SelectTrigger>
                    <Text As="span" Class="@(_selectedCountry == null ? "text-muted-foreground" : "")">
                        @(_selectedCountry ?? "Search countries...")
                    </Text>
                </SelectTrigger>
                <SelectContent>
                    <SelectItem Value="us" SearchValue="United States">United States</SelectItem>
                    <SelectItem Value="uk" SearchValue="United Kingdom">United Kingdom</SelectItem>
                    <SelectItem Value="ca" SearchValue="Canada">Canada</SelectItem>
                    <SelectItem Value="au" SearchValue="Australia">Australia</SelectItem>
                    <SelectItem Value="de" SearchValue="Germany">Germany</SelectItem>
                    <SelectItem Value="fr" SearchValue="France">France</SelectItem>
                    <SelectItem Value="jp" SearchValue="Japan">Japan</SelectItem>
                </SelectContent>
            </Select>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Multiple Selection" Code="@_multipleCode">
        <Stack Gap="2" Class="w-full max-w-sm">
            <Select Multiple="true" @bind-Values="_selectedFruits">
                <SelectTrigger>
                    <Text As="span" Class="@(_selectedFruits == null ? "text-muted-foreground" : "")">
                        @(_selectedFruits == null ? "Select fruits..." : "")
                    </Text>
                </SelectTrigger>
                <SelectContent>
                    <SelectItem Value="apple">Apple</SelectItem>
                    <SelectItem Value="banana">Banana</SelectItem>
                    <SelectItem Value="cherry">Cherry</SelectItem>
                    <SelectItem Value="grape">Grape</SelectItem>
                    <SelectItem Value="mango">Mango</SelectItem>
                    <SelectItem Value="strawberry">Strawberry</SelectItem>
                </SelectContent>
            </Select>
            <Lumeo.Text Size="sm" Color="muted">Selected: @(_selectedFruits != null ? string.Join(", ", _selectedFruits) : "none")</Lumeo.Text>
        </Stack>
    </ComponentDemo>

    <ComponentDemo Title="Clearable" Code="@_clearableCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <Select Clearable="true" @bind-Value="_selectedClearable">
                <SelectTrigger>
                    <Text As="span" Class="@(_selectedClearable == null ? "text-muted-foreground" : "")">
                        @(_selectedClearable ?? "Select a color")
                    </Text>
                </SelectTrigger>
                <SelectContent>
                    <SelectItem Value="red">Red</SelectItem>
                    <SelectItem Value="blue">Blue</SelectItem>
                    <SelectItem Value="green">Green</SelectItem>
                    <SelectItem Value="purple">Purple</SelectItem>
                </SelectContent>
            </Select>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Loading State" Code="@_loadingCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <Select IsLoading="true" @bind-Value="_selectedLoading">
                <SelectTrigger>
                    <Text As="span" Class="text-muted-foreground">Loading options...</Text>
                </SelectTrigger>
                <SelectContent>
                    <SelectItem Value="item1">Item 1</SelectItem>
                </SelectContent>
            </Select>
        </Container>
    </ComponentDemo>

    <ComponentDemo Title="Disabled" Code="@_disabledCode">
        <Container MaxWidth="sm" Center="false" Padding="">
            <Select Disabled="true" Value="blazor">
                <SelectTrigger>
                    <Text As="span">Blazor</Text>
                </SelectTrigger>
                <SelectContent>
                    <SelectItem Value="blazor">Blazor</SelectItem>
                </SelectContent>
            </Select>
        </Container>
    </ComponentDemo>
</Stack>

<div class="mt-12">
    <Heading Id="keyboard-interactions" Level="2" Class="scroll-mt-20">Keyboard Interactions</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Key</TableHead>
                    <TableHead>Action</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell><Kbd>Enter</Kbd></TableCell><TableCell>Opens the dropdown or selects the highlighted option.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Space</Kbd></TableCell><TableCell>Opens the dropdown when the trigger is focused.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>ArrowDown</Kbd></TableCell><TableCell>Moves highlight to the next option.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>ArrowUp</Kbd></TableCell><TableCell>Moves highlight to the previous option.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Escape</Kbd></TableCell><TableCell>Closes the dropdown without changing the selection.</TableCell></TableRow>
                <TableRow><TableCell><Kbd>Type to search</Kbd></TableCell><TableCell>Filters options when the searchable prop is enabled.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>

    <Stack Gap="8" Class="mt-8">
        <Stack Gap="3">
            <Heading Level="3">Select</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Value</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">The currently selected value. Use with @@bind-Value for two-way binding.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ValueChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;string&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Callback invoked when the selected value changes.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Multiple</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Enables multi-select mode. Selected items show as tags in the trigger.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Values</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">List&lt;string&gt;?</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">null</td>
                            <td class="p-3 text-muted-foreground">The selected values in multi-select mode. Use with @@bind-Values.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">ValuesChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;List&lt;string&gt;?&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Callback invoked when the selected values change in multi-select mode.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Open</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Controls whether the dropdown is open.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OpenChanged</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;bool&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Callback invoked when the open state changes.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Searchable</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Enables filtering options by typing in an inline search input.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Clearable</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Shows a clear button to reset the selection.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Creatable</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Allows creating new options from the search input.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">OnCreate</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;string&gt;</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">—</td>
                            <td class="p-3 text-muted-foreground">Callback invoked when a new item is created via the search input.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">MaxDisplayTags</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">int</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">3</td>
                            <td class="p-3 text-muted-foreground">Maximum number of tags shown in multi-select mode before showing "+N more".</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Disabled</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Disables the select and prevents user interaction.</td>
                        </tr>
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">IsLoading</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">bool</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">false</td>
                            <td class="p-3 text-muted-foreground">Indicates a loading state, typically showing a spinner in the dropdown.</td>
                        </tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">IsOpen</td><td class="p-3 font-mono text-xs text-muted-foreground">bool</td><td class="p-3 font-mono text-xs text-muted-foreground">false</td><td class="p-3 text-muted-foreground">Programmatic open state (alias for Open). Use with @@bind-IsOpen.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">IsOpenChanged</td><td class="p-3 font-mono text-xs text-muted-foreground">EventCallback&lt;bool&gt;</td><td class="p-3 font-mono text-xs text-muted-foreground">—</td><td class="p-3 text-muted-foreground">Fires when open state changes (alias for OpenChanged).</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Items</td><td class="p-3 font-mono text-xs text-muted-foreground">IEnumerable&lt;TItem&gt;?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Data source for auto-rendering items when using the generic data API (instead of SelectItem markup).</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ItemValue</td><td class="p-3 font-mono text-xs text-muted-foreground">Func&lt;TItem, string&gt;?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Function that extracts the value string from a TItem when using Items.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ItemText</td><td class="p-3 font-mono text-xs text-muted-foreground">Func&lt;TItem, string&gt;?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Function that extracts the display text from a TItem when using Items.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ItemGroup</td><td class="p-3 font-mono text-xs text-muted-foreground">Func&lt;TItem, string?&gt;?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Optional function that groups items under labelled sections.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ItemDisabled</td><td class="p-3 font-mono text-xs text-muted-foreground">Func&lt;TItem, bool&gt;?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Optional predicate that disables specific items.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ItemTemplate</td><td class="p-3 font-mono text-xs text-muted-foreground">RenderFragment&lt;TItem&gt;?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Custom template for rendering each item row.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Virtualize</td><td class="p-3 font-mono text-xs text-muted-foreground">bool</td><td class="p-3 font-mono text-xs text-muted-foreground">false</td><td class="p-3 text-muted-foreground">When true, virtualizes the item list for large data sets.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ItemSize</td><td class="p-3 font-mono text-xs text-muted-foreground">float</td><td class="p-3 font-mono text-xs text-muted-foreground">36</td><td class="p-3 text-muted-foreground">Row height in pixels used by the virtualizer.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Required</td><td class="p-3 font-mono text-xs text-muted-foreground">bool</td><td class="p-3 font-mono text-xs text-muted-foreground">false</td><td class="p-3 text-muted-foreground">Marks the field as required for form validation.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Invalid</td><td class="p-3 font-mono text-xs text-muted-foreground">bool</td><td class="p-3 font-mono text-xs text-muted-foreground">false</td><td class="p-3 text-muted-foreground">Applies error styling to indicate a validation error.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">ErrorText</td><td class="p-3 font-mono text-xs text-muted-foreground">string?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Error message shown below when Invalid is true (standalone).</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">HelperText</td><td class="p-3 font-mono text-xs text-muted-foreground">string?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Help text shown below when there is no error (standalone).</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Label</td><td class="p-3 font-mono text-xs text-muted-foreground">string?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Inline label rendered above the select (standalone).</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Name</td><td class="p-3 font-mono text-xs text-muted-foreground">string?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">HTML name attribute for form identification.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">FormField</td><td class="p-3 font-mono text-xs text-muted-foreground">FormFieldContext?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Cascaded context from a parent FormField; drives validation state automatically.</td></tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack Gap="3">
            <Heading Level="3">SelectItem</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary">Value</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">string</td>
                            <td class="p-3 font-mono text-xs text-muted-foreground">""</td>
                            <td class="p-3 text-muted-foreground">The value this item represents when selected. Required.</td>
                        </tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack Gap="3">
            <Heading Level="3">SelectGroup / SelectLabel / SelectTrigger / SelectContent</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr>
                            <td class="p-3 font-mono text-xs text-primary italic text-muted-foreground" colspan="4">These layout components accept only Class and AdditionalAttributes unless noted below. SelectGroup groups related items, SelectLabel labels a group, SelectTrigger is the button that opens the dropdown, and SelectContent is the dropdown panel.</td>
                        </tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Placeholder</td><td class="p-3 font-mono text-xs text-muted-foreground">string?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">SelectTrigger — text shown when no value is selected.</td></tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>
    </Stack>
</Stack>

<div class="mt-12">
    <Heading Id="related" Level="2" Class="scroll-mt-20">Related Components</Heading>
    <ul class="mt-4 space-y-2 text-sm">
        <li><a href="/components/combobox" class="text-primary hover:underline">Combobox</a> — Use when the user needs to search and filter a large list of options.</li>
        <li><a href="/components/radio-group" class="text-primary hover:underline">RadioGroup</a> — Better for small lists (2-5 items) where all options should be visible.</li>
        <li><a href="/components/dropdown-menu" class="text-primary hover:underline">DropdownMenu</a> — Use for action menus rather than value selection.</li>
    </ul>
</div>

@code {
    private string? _selectedFruit;
    private string? _selectedFramework;
    private string? _selectedTimezone;
    private string? _selectedCountry;
    private List<string>? _selectedFruits;
    private string? _selectedClearable;
    private string? _selectedLoading;

    private string _defaultCode = @"<Select @bind-Value=""_selected"">
    <SelectTrigger>
        <span>@(_selected ?? ""Select a fruit"")</span>
    </SelectTrigger>
    <SelectContent>
        <SelectItem Value=""apple"">Apple</SelectItem>
        <SelectItem Value=""banana"">Banana</SelectItem>
        <SelectItem Value=""cherry"">Cherry</SelectItem>
    </SelectContent>
</Select>

@code {
    private string? _selected;
}";

    private string _bindingCode = @"<Select @bind-Value=""_selected"">
    <SelectTrigger>
        <span>@(_selected ?? ""Select a framework"")</span>
    </SelectTrigger>
    <SelectContent>
        <SelectItem Value=""blazor"">Blazor</SelectItem>
        <SelectItem Value=""react"">React</SelectItem>
        <SelectItem Value=""vue"">Vue</SelectItem>
    </SelectContent>
</Select>
<Lumeo.Text Size=""sm"" Color=""muted"">Selected: @(_selected ?? ""none"")</Lumeo.Text>";

    private string _groupCode = @"<Select @bind-Value=""_selected"">
    <SelectTrigger>
        <span>@(_selected ?? ""Select a timezone"")</span>
    </SelectTrigger>
    <SelectContent>
        <SelectGroup>
            <SelectLabel>North America</SelectLabel>
            <SelectItem Value=""est"">Eastern (EST)</SelectItem>
            <SelectItem Value=""cst"">Central (CST)</SelectItem>
        </SelectGroup>
        <SelectGroup>
            <SelectLabel>Europe</SelectLabel>
            <SelectItem Value=""gmt"">Greenwich (GMT)</SelectItem>
            <SelectItem Value=""cet"">Central European (CET)</SelectItem>
        </SelectGroup>
    </SelectContent>
</Select>";

    private string _searchableCode = @"<Select Searchable=""true"" @bind-Value=""_selected"">
    <SelectTrigger>
        <span>@(_selected ?? ""Search countries..."")</span>
    </SelectTrigger>
    <SelectContent>
        <SelectItem Value=""us"">United States</SelectItem>
        <SelectItem Value=""uk"">United Kingdom</SelectItem>
        <SelectItem Value=""ca"">Canada</SelectItem>
    </SelectContent>
</Select>";

    private string _multipleCode = @"<Select Multiple=""true"" @bind-Values=""_selectedFruits"">
    <SelectTrigger>
        <span class=""text-muted-foreground"">Select fruits...</span>
    </SelectTrigger>
    <SelectContent>
        <SelectItem Value=""apple"">Apple</SelectItem>
        <SelectItem Value=""banana"">Banana</SelectItem>
        <SelectItem Value=""cherry"">Cherry</SelectItem>
        <SelectItem Value=""grape"">Grape</SelectItem>
        <SelectItem Value=""mango"">Mango</SelectItem>
    </SelectContent>
</Select>

@code {
    private List<string>? _selectedFruits;
}";

    private string _clearableCode = @"<Select Clearable=""true"" @bind-Value=""_selected"">
    <SelectTrigger>
        <span>@(_selected ?? ""Select a color"")</span>
    </SelectTrigger>
    <SelectContent>
        <SelectItem Value=""red"">Red</SelectItem>
        <SelectItem Value=""blue"">Blue</SelectItem>
        <SelectItem Value=""green"">Green</SelectItem>
    </SelectContent>
</Select>";

    private string _loadingCode = @"<Select IsLoading=""true"" @bind-Value=""_selected"">
    <SelectTrigger>
        <span class=""text-muted-foreground"">Loading options...</span>
    </SelectTrigger>
    <SelectContent>
        <SelectItem Value=""item1"">Item 1</SelectItem>
    </SelectContent>
</Select>";

    private string _disabledCode = @"<Select Disabled=""true"" Value=""blazor"">
    <SelectTrigger>
        <span>Blazor</span>
    </SelectTrigger>
    <SelectContent>
        <SelectItem Value=""blazor"">Blazor</SelectItem>
    </SelectContent>
</Select>";
}
