Dialog

<script lang="ts">
  import { XIcon } from "@lucide/svelte"
  import {
    Dialog,
    DialogBackdrop,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogTitle,
    DialogTrigger,
  } from "@ui-sdk/svelte/dialog"
  import { Field, FieldLabel } from "@ui-sdk/svelte/field"
  import { Input } from "@ui-sdk/svelte/input"
</script>

<Dialog>
  <DialogTrigger>Share</DialogTrigger>
  <DialogBackdrop />
  <DialogContent>
    <div data-slot="stack">
      <DialogTitle>Share link</DialogTitle>
      <DialogDescription
        >Anyone who has this link will be able to view this.</DialogDescription
      >
    </div>
    <Field>
      <FieldLabel>Link</FieldLabel>
      <Input defaultValue="https://example.com/project" readonly />
    </Field>
    <div data-slot="row">
      <DialogClose data-variant="solid">Done</DialogClose>
    </div>
    <DialogClose aria-label="Close">
      <XIcon aria-hidden="true" />
    </DialogClose>
  </DialogContent>
</Dialog>

<script lang="ts">
  import {
    Dialog,
    DialogBackdrop,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogTitle,
    DialogTrigger,
  } from "@ui-sdk/svelte/dialog"

  const paragraphs = [
    "These terms govern your use of the service. By creating an account, you agree to them and to the privacy policy that explains how we handle your data.",
    "You're responsible for the content you upload and for keeping your password safe. Tell us right away if you think someone else has used your account.",
    "We may change the service, and these terms, as the product grows. When a change affects you, we'll let you know by email at least 30 days before it takes effect.",
    "You can stop using the service at any time. We'll keep your data for 30 days after you close your account, so you can export it, and then delete it.",
    "The service is provided as is. To the extent the law allows, we aren't liable for indirect damages, lost profits or lost data.",
    "If you have questions about these terms, write to us. We read every message and reply within two working days.",
  ]
</script>

<Dialog>
  <DialogTrigger>Scrollable Content</DialogTrigger>
  <DialogBackdrop />
  <DialogContent initialFocus="content">
    <div data-slot="stack">
      <DialogTitle>Terms of service</DialogTitle>
      <DialogDescription>Please read before you continue.</DialogDescription>
    </div>
    <div data-slot="scroll">
      {#each paragraphs as paragraph (paragraph)}
        <p>{paragraph}</p>
      {/each}
    </div>
    <div data-slot="row">
      <DialogClose>Decline</DialogClose>
      <DialogClose data-variant="solid" value="accept">Accept</DialogClose>
    </div>
  </DialogContent>
</Dialog>

<script lang="ts">
  import {
    Dialog,
    DialogBackdrop,
    DialogContent,
    DialogDescription,
    DialogTitle,
    DialogTrigger,
  } from "@ui-sdk/svelte/dialog"
  import { Field, FieldLabel } from "@ui-sdk/svelte/field"
  import { Input } from "@ui-sdk/svelte/input"
  import { useLog } from "./log"

  const log = useLog()
</script>

<Dialog
  onOpenChange={(open, details) => {
    if (!open) {
      log(
        details.returnValue
          ? `Saved as ${details.returnValue}`
          : `Closed (${details.reason})`
      )
    }
  }}
>
  <DialogTrigger>New Article</DialogTrigger>
  <DialogBackdrop />
  <DialogContent>
    <div data-slot="stack">
      <DialogTitle>New article</DialogTitle>
      <DialogDescription
        >Save it as a draft or publish it now.</DialogDescription
      >
    </div>
    <form data-slot="stack" method="dialog">
      <Field>
        <FieldLabel>Title</FieldLabel>
        <Input required defaultValue="Shipping updates for spring" />
      </Field>
      <div data-slot="row">
        <button type="submit" value="draft">Save Draft</button>
        <button data-variant="solid" type="submit" value="published"
          >Publish</button
        >
      </div>
    </form>
  </DialogContent>
</Dialog>

<script lang="ts">
  import { CheckIcon } from "@lucide/svelte"
  import { Checkbox, CheckboxIndicator } from "@ui-sdk/svelte/checkbox"
  import {
    Dialog,
    DialogBackdrop,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogTitle,
    DialogTrigger,
  } from "@ui-sdk/svelte/dialog"
  import { useLog } from "./log"

  const topics = [
    { label: "Product updates", checked: true },
    { label: "Security alerts", checked: true },
    { label: "Weekly digest", checked: false },
  ]

  const log = useLog()
  let open = $state(false)
</script>

<div data-slot="stack">
  <div data-slot="controls">
    <label data-slot="label">
      <Checkbox
        checked={open}
        onCheckedChange={(next) => (open = next === true)}
      >
        <CheckboxIndicator>
          <CheckIcon aria-hidden="true" />
        </CheckboxIndicator>
      </Checkbox>
      Open
    </label>
  </div>
  <Dialog
    bind:open
    onOpenChange={(next, details) =>
      log(`${next ? "Opened" : "Closed"} (${details.reason})`)}
    onOpenChangeComplete={(next) =>
      log(next ? "Finished opening" : "Finished closing")}
  >
    <DialogTrigger>Notification Settings</DialogTrigger>
    <DialogBackdrop />
    <DialogContent>
      <div data-slot="stack">
        <DialogTitle>Notification settings</DialogTitle>
        <DialogDescription>Choose what we email you about.</DialogDescription>
      </div>
      <div data-slot="stack">
        {#each topics as topic (topic.label)}
          <label data-slot="label">
            <Checkbox defaultChecked={topic.checked}>
              <CheckboxIndicator>
                <CheckIcon aria-hidden="true" />
              </CheckboxIndicator>
            </Checkbox>
            {topic.label}
          </label>
        {/each}
      </div>
      <div data-slot="row">
        <DialogClose data-variant="solid">Done</DialogClose>
      </div>
    </DialogContent>
  </Dialog>
</div>

<script lang="ts">
  import { PlusIcon } from "@lucide/svelte"
  import {
    Dialog,
    DialogBackdrop,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogShortcut,
    DialogTitle,
    DialogTrigger,
  } from "@ui-sdk/svelte/dialog"
  import { Field, FieldLabel } from "@ui-sdk/svelte/field"
  import { Input } from "@ui-sdk/svelte/input"
</script>

<Dialog>
  <DialogTrigger shortcut="mod+j">
    <PlusIcon aria-hidden="true" />
    New Contact
    <DialogShortcut />
  </DialogTrigger>
  <DialogBackdrop />
  <DialogContent>
    <div data-slot="stack">
      <DialogTitle>New contact</DialogTitle>
      <DialogDescription>Add someone to your address book.</DialogDescription>
    </div>
    <form data-slot="stack" method="dialog">
      <Field>
        <FieldLabel>Name</FieldLabel>
        <Input name="name" required placeholder="Kofi Mensah" />
      </Field>
      <Field>
        <FieldLabel>Email</FieldLabel>
        <Input
          name="email"
          type="email"
          required
          placeholder="kofi@example.com"
        />
      </Field>
      <div data-slot="row">
        <DialogClose>Cancel</DialogClose>
        <button data-variant="solid" type="submit" value="save"
          >Save Contact</button
        >
      </div>
    </form>
  </DialogContent>
</Dialog>

<script lang="ts">
  import {
    Dialog,
    DialogBackdrop,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogTitle,
    DialogTrigger,
  } from "@ui-sdk/svelte/dialog"
  import { useLog } from "./log"

  const log = useLog()
</script>

<Dialog
  onOpenChangeComplete={(open) =>
    log(open ? "Finished opening" : "Finished closing")}
>
  <DialogTrigger>Slide In</DialogTrigger>
  <DialogBackdrop />
  <DialogContent keepMounted>
    <div data-slot="stack">
      <DialogTitle>Slide and fade</DialogTitle>
      <DialogDescription
        >300ms in and out. Focus returns as soon as it starts closing.</DialogDescription
      >
    </div>
    <div data-slot="row">
      <DialogClose data-variant="solid">Close</DialogClose>
    </div>
  </DialogContent>
</Dialog>

<script lang="ts">
  import { CheckIcon, ChevronDownIcon } from "@lucide/svelte"
  import { Checkbox, CheckboxIndicator } from "@ui-sdk/svelte/checkbox"
  import {
    Dialog,
    DialogBackdrop,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogTitle,
    DialogTrigger,
  } from "@ui-sdk/svelte/dialog"
  import {
    Select,
    SelectContent,
    SelectItem,
    SelectItemIndicator,
    SelectLabel,
    SelectTrigger,
    SelectValue,
  } from "@ui-sdk/svelte/select"

  const modes = [
    { value: "true", label: "Modal" },
    { value: "trap-focus", label: "Trap focus" },
    { value: "false", label: "Non-modal" },
  ]

  type Mode = "true" | "trap-focus" | "false"

  const notes = {
    true: "The rest of the page is inert and doesn't scroll.",
    "trap-focus":
      "Tab stays inside, and the page still scrolls and takes clicks.",
    false:
      "The page stays usable. Tab leaves the notes, and Escape closes them while focus is inside.",
  }

  let mode = $state<Mode>("false")
  let outside = $state(false)
  const modal = $derived(
    mode === "true" ? true : mode === "false" ? false : "trap-focus"
  )
</script>

<div data-slot="stack">
  <div data-slot="controls">
    <Select
      items={modes}
      value={mode}
      onValueChange={(next) => next && (mode = next as Mode)}
    >
      <SelectLabel>Modal</SelectLabel>
      <SelectTrigger>
        <SelectValue />
        <ChevronDownIcon />
      </SelectTrigger>
      <SelectContent>
        {#each modes as option (option.value)}
          <SelectItem value={option.value}>
            {option.label}
            <SelectItemIndicator>
              <CheckIcon />
            </SelectItemIndicator>
          </SelectItem>
        {/each}
      </SelectContent>
    </Select>
    <label data-slot="label">
      <Checkbox
        checked={outside}
        onCheckedChange={(next) => (outside = next === true)}
      >
        <CheckboxIndicator>
          <CheckIcon aria-hidden="true" />
        </CheckboxIndicator>
      </Checkbox>
      Close on outside press
    </label>
  </div>
  <Dialog {modal} closeOnOutsidePress={outside}>
    <DialogTrigger>Open Notes</DialogTrigger>
    {#if modal === true}
      <DialogBackdrop />
    {/if}
    <DialogContent>
      <div data-slot="stack">
        <DialogTitle>Notes</DialogTitle>
        <DialogDescription>{notes[mode]}</DialogDescription>
      </div>
      <textarea aria-label="Notes" value="Call the printer about the proofs."
      ></textarea>
      <div data-slot="row">
        <DialogClose data-variant="solid">Done</DialogClose>
      </div>
    </DialogContent>
  </Dialog>
</div>

<script lang="ts">
  import {
    Dialog,
    DialogBackdrop,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogTitle,
    DialogTrigger,
  } from "@ui-sdk/svelte/dialog"
  import { Field, FieldControl, FieldLabel } from "@ui-sdk/svelte/field"

  let open = $state(false)
  let dirty = $state(false)
  let asking = $state(false)
  let post: HTMLTextAreaElement | undefined = $state()

  function close() {
    open = false
    dirty = false
    asking = false
  }

  function keepEditing() {
    asking = false
    post?.focus()
  }
</script>

<Dialog
  bind:open={() => open, (next) => (next ? (open = true) : close())}
  dismissible={!dirty}
  onDismissAttempt={() => (asking = true)}
>
  <DialogTrigger>Write a Post</DialogTrigger>
  <DialogBackdrop />
  <DialogContent>
    <div data-slot="stack">
      <DialogTitle>New post</DialogTitle>
      <DialogDescription>Share an update with your team.</DialogDescription>
    </div>
    <Field>
      <FieldLabel>Post</FieldLabel>
      <FieldControl
        oninput={(event) => (dirty = event.currentTarget.value !== "")}
      >
        {#snippet render({ props })}
          <textarea bind:this={post} {...props} placeholder="What's new?"
          ></textarea>
        {/snippet}
      </FieldControl>
    </Field>
    {#if asking}
      <div data-slot="row" role="alert">
        Discard your changes?
        <div data-slot="row">
          <button type="button" onclick={keepEditing}>Keep Editing</button>
          <button data-variant="solid" type="button" onclick={close}
            >Discard</button
          >
        </div>
      </div>
    {:else}
      <div data-slot="row">
        <DialogClose data-variant="solid" value="post">Post</DialogClose>
      </div>
    {/if}
  </DialogContent>
</Dialog>

<script lang="ts">
  import {
    Dialog,
    DialogBackdrop,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogTitle,
    DialogTrigger,
  } from "@ui-sdk/svelte/dialog"
  import { Field, FieldLabel } from "@ui-sdk/svelte/field"
  import { Input } from "@ui-sdk/svelte/input"
</script>

<Dialog>
  <DialogTrigger>Account</DialogTrigger>
  <DialogBackdrop />
  <DialogContent>
    <div data-slot="stack">
      <DialogTitle>Account</DialogTitle>
      <DialogDescription>Manage how you sign in.</DialogDescription>
    </div>
    <div data-slot="card">
      <div data-slot="stack">
        <span>Password</span>
        <span data-slot="hint">Last changed 3 months ago</span>
      </div>
      <Dialog>
        <DialogTrigger>Change Password</DialogTrigger>
        <DialogBackdrop />
        <DialogContent>
          <div data-slot="stack">
            <DialogTitle>Change password</DialogTitle>
            <DialogDescription>Use at least 12 characters.</DialogDescription>
          </div>
          <Field>
            <FieldLabel>New password</FieldLabel>
            <Input type="password" />
          </Field>
          <div data-slot="row">
            <DialogClose>Cancel</DialogClose>
            <DialogClose data-variant="solid">Update</DialogClose>
          </div>
        </DialogContent>
      </Dialog>
    </div>
    <div data-slot="row">
      <DialogClose data-variant="solid">Done</DialogClose>
    </div>
  </DialogContent>
</Dialog>

<script lang="ts">
  import { CopyIcon, EllipsisIcon, PencilIcon } from "@lucide/svelte"
  import {
    createDialogController,
    Dialog,
    DialogBackdrop,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogTitle,
  } from "@ui-sdk/svelte/dialog"
  import { Field, FieldLabel } from "@ui-sdk/svelte/field"
  import { Input } from "@ui-sdk/svelte/input"
  import { Menu, MenuContent, MenuItem, MenuTrigger } from "@ui-sdk/svelte/menu"

  const rename = createDialogController()
</script>

<Menu>
  <MenuTrigger aria-label="File actions">
    <EllipsisIcon aria-hidden="true" />
  </MenuTrigger>
  <MenuContent>
    <MenuItem onSelect={() => rename.open()}>
      <PencilIcon aria-hidden="true" />
      Rename…
    </MenuItem>
    <MenuItem>
      <CopyIcon aria-hidden="true" />
      Duplicate
    </MenuItem>
  </MenuContent>
</Menu>
<Dialog controller={rename}>
  <DialogBackdrop />
  <DialogContent>
    <div data-slot="stack">
      <DialogTitle>Rename file</DialogTitle>
      <DialogDescription>Names must be unique in a folder.</DialogDescription>
    </div>
    <Field>
      <FieldLabel>Name</FieldLabel>
      <Input defaultValue="report.pdf" />
    </Field>
    <div data-slot="row">
      <DialogClose>Cancel</DialogClose>
      <DialogClose data-variant="solid" value="rename">Rename</DialogClose>
    </div>
  </DialogContent>
</Dialog>

<script lang="ts">
  import {
    createDialogController,
    Dialog,
    DialogBackdrop,
    DialogClose,
    DialogContent,
    type DialogContentState,
    DialogDescription,
    DialogTitle,
    DialogTrigger,
  } from "@ui-sdk/svelte/dialog"
  import { useLog } from "./log"

  type Invoice = {
    id: string
    customer: string
    amount: string
    status: "Paid" | "Due"
  }

  const invoices: Invoice[] = [
    { id: "INV-001", customer: "Acme", amount: "$250.00", status: "Paid" },
    { id: "INV-002", customer: "Globex", amount: "$150.00", status: "Due" },
    { id: "INV-003", customer: "Initech", amount: "$350.00", status: "Due" },
  ]

  const reminder = createDialogController<Invoice, "send">()
  const log = useLog()

  async function remindFromCode() {
    const { reason, returnValue } = await reminder.open({
      payload: invoices[2],
    })
    log(
      returnValue === "send" ? "Reminder sent from code" : `Closed (${reason})`
    )
  }
</script>

<div data-slot="stack">
  <div data-slot="controls">
    <button type="button" onclick={remindFromCode}>Open from Code</button>
  </div>
  <ul data-slot="list">
    {#each invoices as invoice (invoice.id)}
      <li data-slot="row">
        {invoice.customer}
        <span data-slot="hint">{invoice.amount} · {invoice.status}</span>
        <DialogTrigger
          controller={reminder}
          payload={invoice}
          disabled={invoice.status === "Paid"}
          aria-label={`Remind ${invoice.customer}`}
        >
          Remind
        </DialogTrigger>
      </li>
    {/each}
  </ul>
  <Dialog
    controller={reminder}
    onOpenChange={(open, details) => {
      if (!open && details.returnValue === "send") {
        log("Reminder sent")
      }
    }}
  >
    <DialogBackdrop />
    <DialogContent>
      {#snippet children(state: DialogContentState<Invoice>)}
        <div data-slot="stack">
          <DialogTitle>Remind {state.payload?.customer}</DialogTitle>
          <DialogDescription>
            {state.payload?.id} for {state.payload?.amount} is due. We'll email the
            billing contact.
          </DialogDescription>
        </div>
        <div data-slot="row">
          <DialogClose>Cancel</DialogClose>
          <DialogClose data-variant="solid" value="send"
            >Send reminder</DialogClose
          >
        </div>
      {/snippet}
    </DialogContent>
  </Dialog>
</div>

<script lang="ts">
  import {
    Dialog,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogTitle,
    DialogTrigger,
  } from "@ui-sdk/svelte/dialog"
  import { Field, FieldLabel } from "@ui-sdk/svelte/field"
  import { Input } from "@ui-sdk/svelte/input"
</script>

<Dialog presentation="sheet">
  <DialogTrigger>Edit Profile</DialogTrigger>
  <DialogContent>
    <div data-slot="stack">
      <DialogTitle>Edit profile</DialogTitle>
      <DialogDescription
        >Make changes to your profile here. Save when you're done.</DialogDescription
      >
    </div>
    <Field>
      <FieldLabel>Name</FieldLabel>
      <Input defaultValue="Hollis Grant" />
    </Field>
    <Field>
      <FieldLabel>Username</FieldLabel>
      <Input defaultValue="@hollis" />
    </Field>
    <div data-slot="row">
      <DialogClose>Cancel</DialogClose>
      <DialogClose data-variant="solid" value="save">Save Changes</DialogClose>
    </div>
  </DialogContent>
</Dialog>

<script lang="ts">
  import {
    Dialog,
    DialogBackdrop,
    DialogClose,
    DialogContent,
    DialogDescription,
    DialogShortcut,
    DialogTitle,
    DialogTrigger,
  } from "@ui-sdk/svelte/dialog"
</script>

<Dialog>
  <DialogTrigger shortcut="mod+i">
    {#snippet render({ props, state })}
      <button {...props}>
        {state.open ? "Viewing" : "View Details"}
        <DialogShortcut>
          {#snippet children(shortcut)}{shortcut.text}{/snippet}
        </DialogShortcut>
      </button>
    {/snippet}
  </DialogTrigger>
  <DialogBackdrop />
  <DialogContent>
    {#snippet children(state)}
      <div data-slot="stack">
        <DialogTitle>
          {#snippet render({ props })}
            <h3 {...props}>Details</h3>
          {/snippet}
        </DialogTitle>
        <DialogDescription>
          {state.nested
            ? "Opened from another dialog."
            : "Quarterly report, updated today."}
        </DialogDescription>
      </div>
      <div data-slot="row">
        <DialogClose>Close</DialogClose>
        <DialogClose data-variant="solid" href="https://example.com/details">
          {#snippet render({ props })}
            <a {...props}>Open the Full Page</a>
          {/snippet}
        </DialogClose>
      </div>
    {/snippet}
  </DialogContent>
</Dialog>