Selection

function Example() {
    const updates = signal(true);
    return (
        <Checkbox
            label="Email me about product updates"
            checked={updates()}
            onChange={(e) => updates.set((e.target as HTMLInputElement).checked)}
        />
    );
}

const regions = [
    { value: "fra1", label: "Frankfurt" },
    { value: "iad1", label: "Washington, D.C." },
    { value: "hnd1", label: "Tokyo" },
];

function Example() {
    const selected = signal(["fra1"]);
    return (
        <CheckboxGroup
            legend="Regions"
            options={regions}
            value={selected()}
            onChange={selected.set}
        />
    );
}

function Example() {
    const items = signal<ChecklistItemData[]>([
        { id: "domain", label: "Connect a domain", done: true },
        { id: "invite", label: "Invite your team", done: true },
        { id: "deploy", label: "Ship your first deploy" },
    ]);
    const done = () => items().filter((i) => i.done).length;
    return (
        <Stack gap="0.5rem">
            <Checklist items={items()} onChange={items.set} />
            <Text muted>
                {done()} of {items().length} done
            </Text>
        </Stack>
    );
}

const plans = [
    { value: "free", label: "Free" },
    { value: "pro", label: "Pro" },
    { value: "team", label: "Team" },
];

function Example() {
    const plan = signal("pro");
    return (
        <RadioGroup
            label="Plan"
            name="plan"
            options={plans}
            value={plan()}
            onChange={(e) => plan.set((e.target as HTMLInputElement).value)}
        />
    );
}

function Example() {
    const previews = signal(true);
    return (
        <Switch
            label="Preview deploys"
            checked={previews()}
            onChange={(e) => previews.set((e.target as HTMLInputElement).checked)}
        />
    );
}

const plans = [
    { value: "free", label: "Free" },
    { value: "pro", label: "Pro" },
    { value: "team", label: "Team" },
];

function Example() {
    const plan = signal("pro");
    return (
        <Select
            aria-label="Plan"
            options={plans}
            value={plan()}
            onChange={(e) => plan.set((e.target as HTMLInputElement).value)}
        />
    );
}

const regions = [
    { value: "fra1", label: "Frankfurt" },
    { value: "iad1", label: "Washington, D.C." },
    { value: "hnd1", label: "Tokyo" },
];

function Example() {
    const region = signal("fra1");
    return (
        <NativeSelect
            aria-label="Region"
            options={regions}
            value={region()}
            onChange={region.set}
        />
    );
}

const regions = [
    { value: "fra1", label: "Frankfurt" },
    { value: "iad1", label: "Washington, D.C." },
    { value: "hnd1", label: "Tokyo" },
];

function Example() {
    const selected = signal(["fra1", "iad1"]);
    return (
        <MultiSelect
            aria-label="Regions"
            options={regions}
            value={selected()}
            onChange={selected.set}
        />
    );
}

function Example() {
    const country = signal("");
    return (
        <Autocomplete
            aria-label="Country"
            placeholder="Start typing a country"
            value={country()}
            options={["Germany", "Japan", "United Kingdom", "United States"]}
            onChange={country.set}
        />
    );
}

function Example() {
    const plan = signal("pro");
    return (
        <Group gap="0.75rem">
            <ChoiceCard
                type="radio"
                name="plan"
                value="free"
                checked={plan() === "free"}
                label="Free"
                description="For side projects"
                onChange={(checked) => checked && plan.set("free")}
            />
            <ChoiceCard
                type="radio"
                name="plan"
                value="pro"
                checked={plan() === "pro"}
                label="Pro"
                description="$20 per seat / month"
                onChange={(checked) => checked && plan.set("pro")}
            />
        </Group>
    );
}

function Example() {
    const on = signal(true);
    return (
        <Chip checked={on()} onChange={on.set}>
            TypeScript
        </Chip>
    );
}

function Example() {
    const frameworks = signal(["arachne"]);
    return (
        <ChipGroup
            legend="Frameworks"
            multiple
            options={[
                { value: "arachne", label: "Arachne" },
                { value: "solid", label: "Solid" },
                { value: "svelte", label: "Svelte" },
            ]}
            value={frameworks()}
            onChange={frameworks.set}
        />
    );
}

function Example() {
    const range = signal("7d");
    return (
        <Segmented
            label="Range"
            items={[
                { id: "24h", label: "24h" },
                { id: "7d", label: "7 days" },
                { id: "30d", label: "30 days" },
            ]}
            value={range()}
            onChange={range.set}
        />
    );
}

function Example() {
    const formats = signal<string[]>(["bold"]);
    return (
        <ToggleGroup
            label="Formatting"
            multiple
            items={[
                { id: "bold", label: "Bold" },
                { id: "italic", label: "Italic" },
                { id: "underline", label: "Underline" },
            ]}
            value={formats()}
            onChange={(next) => formats.set(Array.isArray(next) ? next : next ? [next] : [])}
        />
    );
}

function Example() {
    const volume = signal(60);
    return (
        <>
            <Slider aria-label="Volume" value={volume()} onChange={volume.set} />
            <Text muted>Volume: {volume()}</Text>
        </>
    );
}

function Example() {
    const range = signal<[number, number]>([40, 120]);
    return (
        <>
            <RangeSlider
                aria-label="Price range"
                min={0}
                max={200}
                value={range()}
                onChange={range.set}
            />
            <Text muted>
                ${range()[0]} – ${range()[1]}
            </Text>
        </>
    );
}

function Example() {
    const angle = signal(135);
    return (
        <Group gap="0.75rem">
            <AngleSlider value={angle()} onChange={angle.set} />
            <Text muted>{angle()}°</Text>
        </Group>
    );
}

function Example() {
    const stars = signal(4);
    return <Rating aria-label="Rating" value={stars()} onChange={stars.set} />;
}

function Example() {
    const lists = signal({ left: ["Frankfurt", "Tokyo", "São Paulo"], right: ["Washington, D.C."] });
    return (
        <TransferList
            leftTitle="Available"
            rightTitle="Selected"
            left={lists().left}
            right={lists().right}
            onChange={lists.set}
        />
    );
}

function Example() {
    const view = signal<"list" | "grid">("list");
    return (
        <Group gap="0.75rem">
            <ViewToggle value={view()} onChange={view.set} />
            <Text muted>Showing a {view()}</Text>
        </Group>
    );
}

function Example() {
    const density = signal<Density>("compact");
    return (
        <Group gap="0.75rem">
            <DensityToggle value={density()} onChange={density.set} />
            <Text muted>Density: {density()}</Text>
        </Group>
    );
}

type Density = "comfortable" | "compact";

function Example() {
    const theme = signal<"light" | "dark">("light");
    return (
        <Paper withBorder class={theme() === "dark" ? "a-theme-dark" : undefined}>
            <Group gap="0.75rem">
                <ThemeToggle value={theme()} onChange={theme.set} />
                <Text>This panel is in the {theme()} theme.</Text>
            </Group>
        </Paper>
    );
}

function Example() {
    const locale = signal("en");
    return (
        <LocaleSwitcher
            label="Language"
            value={locale()}
            options={[
                { value: "en", label: "English" },
                { value: "de", label: "Deutsch" },
                { value: "ja", label: "日本語" },
            ]}
            onChange={locale.set}
        />
    );
}