Overlays

function Example() {
    const open = signal(false);
    return (
        <>
            <Button onClick={() => open.set(true)}>Open modal</Button>
            <Modal
                open={open()}
                onClose={() => open.set(false)}
                title="Edit profile"
                description="Changes are saved when you press Save."
                footer={
                    <Group gap="0.5rem">
                        <Button variant="ghost" onClick={() => open.set(false)}>
                            Cancel
                        </Button>
                        <Button onClick={() => open.set(false)}>Save</Button>
                    </Group>
                }
            >
                Modal body content.
            </Modal>
        </>
    );
}

function Example() {
    const open = signal(false);
    return (
        <>
            <Button variant="danger" onClick={() => open.set(true)}>
                Delete project
            </Button>
            <ConfirmDialog
                open={open()}
                danger
                title="Delete project?"
                message="This cannot be undone."
                confirmLabel="Delete"
                onConfirm={() => open.set(false)}
                onCancel={() => open.set(false)}
            />
        </>
    );
}

function Example() {
    const open = signal(false);
    return (
        <>
            <Button onClick={() => open.set(true)}>Open drawer</Button>
            <Drawer open={open()} onClose={() => open.set(false)} title="Filters">
                Drawer content.
            </Drawer>
        </>
    );
}

function Example() {
    const open = signal(false);
    return (
        <>
            <Button onClick={() => open.set(true)}>Open sheet</Button>
            <BottomSheet open={open()} onClose={() => open.set(false)} title="Share">
                Sheet content.
            </BottomSheet>
        </>
    );
}

function Example() {
    const open = signal(false);
    return (
        <Popover open={open()} onOpenChange={open.set} label="Share" panelLabel="Share project">
            Anyone with the link can view this project.
        </Popover>
    );
}

type PopoverPlacement = | "bottom-start" | "bottom-end" | "bottom" | "top-start" | "top-end" | "top";

<HoverCard dropdown={<Text>Ada Lovelace · Analyst of engines</Text>}>
    <Anchor href="#ada">@ada</Anchor>
</HoverCard>

<Tooltip content="Copies the deploy URL">
    <Button variant="outline" onClick={() => {}}>
        Copy link
    </Button>
</Tooltip>

function Example() {
    const open = signal(false);
    const last = signal("");
    const pick = (label: string) => () => last.set(label);
    return (
        <Group gap="0.75rem">
            <div style={{ position: "relative" }}>
                <Button variant="outline" aria-expanded={open()} onClick={() => open.set(!open())}>
                    Project actions ▾
                </Button>
                <Menu
                    open={open()}
                    onClose={() => open.set(false)}
                    label="Project actions"
                    items={[
                        { type: "label", label: "marketing-site" },
                        { label: "Rename", onSelect: pick("Rename") },
                        { label: "Duplicate", onSelect: pick("Duplicate") },
                        { type: "separator" },
                        { label: "Delete", onSelect: pick("Delete"), danger: true },
                    ]}
                />
            </div>
            <Text muted>{last() ? `Chose “${last()}”` : "Nothing chosen yet"}</Text>
        </Group>
    );
}

type MenuItem = MenuAction | { type: "separator" } | { type: "label"; label: unknown };

type MenuPlacement = "bottom-start" | "bottom-end" | "top-start" | "top-end";

<ContextMenu
    items={[
        { id: "open", label: "Open", onSelect: () => {} },
        { id: "rename", label: "Rename", onSelect: () => {} },
        { id: "delete", label: "Delete", danger: true, onSelect: () => {} },
    ]}
>
    <Paper withBorder>Right-click this file card</Paper>
</ContextMenu>

function Example() {
    const open = signal(false);
    return (
        <>
            <Button onClick={() => open.set(true)}>Open command palette</Button>
            <Spotlight
                open={open()}
                onClose={() => open.set(false)}
                actions={[
                    { id: "new", label: "New file", onSelect: () => open.set(false) },
                    { id: "open", label: "Open recent", onSelect: () => open.set(false) },
                    { id: "settings", label: "Settings", onSelect: () => open.set(false) },
                ]}
            />
        </>
    );
}

function Example() {
    const index = signal<number | null>(null);
    const images = [
        { src: "/images/one.jpg", alt: "Blue placeholder" },
        { src: "/images/two.jpg", alt: "Green placeholder" },
        { src: "/images/three.jpg", alt: "Orange placeholder" },
    ];
    return (
        <>
            <Button onClick={() => index.set(0)}>Open gallery</Button>
            {index() !== null ? (
                <Lightbox
                    images={images}
                    index={index() ?? 0}
                    onChange={index.set}
                    onClose={() => index.set(null)}
                />
            ) : null}
        </>
    );
}

<Box style={{ position: "relative", "min-height": "6rem" }}>
    <Text>Content under the overlay</Text>
    <Overlay blur />
</Box>