Dialog

<script lang="ts">
	import { Dialog } from "$lib/fancy-ui/dialog";
	import { Button } from "$lib/fancy-ui/button";

	let open = $state(false);
	let email = $state("");
</script>

{#snippet trigger()}
	<Button>Invite member</Button>
{/snippet}

{#snippet footer()}
	<Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
	<Button onclick={() => (open = false)}>Invite</Button>
{/snippet}

<Dialog
	sound
	bind:open
	{trigger}
	{footer}
	title="Invite a member"
	description="Send an email invite to join the workspace."
>
	<input
		type="email"
		bind:value={email}
		placeholder="email@example.com"
		aria-label="Email address"
		class="border-input bg-background text-muted-foreground placeholder:text-muted-foreground focus-visible:ring-ring/50 focus-visible:border-ring w-full rounded-lg border px-3 py-2 text-[12px] outline-none focus-visible:ring-2"
	/>
</Dialog>

<script lang="ts">
	import { Dialog } from "$lib/fancy-ui/dialog";
	import { Button } from "$lib/fancy-ui/button";

	// `open` is a plain, non-bound value here — the parent owns the state and
	// only ever learns about changes through `onOpenChange`, the same pattern
	// a caller reaches for when open/close is driven by something other than
	// this exact button (a route change, a keyboard shortcut, a wizard step).
	let isOpen = $state(false);
</script>

<Button onclick={() => (isOpen = true)}>Open dialog</Button>

<Dialog
	sound
	open={isOpen}
	onOpenChange={(next) => (isOpen = next)}
	title="Restart required"
	description="Applying this setting restarts the current session."
>
	{#snippet footer()}
		<Button variant="outline" onclick={() => (isOpen = false)}>Not now</Button>
		<Button onclick={() => (isOpen = false)}>Restart</Button>
	{/snippet}
</Dialog>

<script lang="ts">
	import { Dialog } from "$lib/fancy-ui/dialog";
	import { Button } from "$lib/fancy-ui/button";

	let open = $state(false);
</script>

{#snippet trigger()}
	<Button variant="outline">Start setup</Button>
{/snippet}

<!--
	dismissible={false} turns off Escape and outside click — for a step that
	should not be lost to a stray click. The ✕ button is unaffected: it is
	an explicit action, not the accidental dismiss this prop guards against,
	so it stays the one deliberate way out.
-->
<Dialog
	sound
	bind:open
	{trigger}
	dismissible={false}
	title="Finish setting up your workspace"
	description="This only takes a moment. Escape and clicking outside are disabled here — use the buttons below or the close icon."
>
	{#snippet footer()}
		<Button onclick={() => (open = false)}>Done</Button>
	{/snippet}
</Dialog>

<script lang="ts">
	import { Dialog } from "$lib/fancy-ui/dialog";
	import { Button } from "$lib/fancy-ui/button";

	let open = $state(false);
	let name = $state("Untitled project");
	let nameInput: HTMLInputElement | null = $state(null);
</script>

{#snippet trigger()}
	<Button variant="outline">Rename project</Button>
{/snippet}

<!--
	Without initialFocus, the first focusable descendant would be the ✕ close
	button — a reasonable default, but not what a rename dialog wants. Passing
	the input's own element sends focus straight to it instead.
-->
<Dialog sound bind:open initialFocus={nameInput} {trigger} title="Rename project">
	<input
		bind:this={nameInput}
		bind:value={name}
		type="text"
		class="border-input bg-background focus-visible:ring-ring/50 focus-visible:border-ring w-full rounded-lg border px-3 py-2 text-[13px] outline-none focus-visible:ring-2"
	/>
	{#snippet footer()}
		<Button variant="outline" onclick={() => (open = false)}>Cancel</Button>
		<Button onclick={() => (open = false)}>Save</Button>
	{/snippet}
</Dialog>