Combobox

	<script lang="ts">
  import Check from "svelte-radix/Check.svelte";
  import CaretSort from "svelte-radix/CaretSort.svelte";
  import * as Command from "$lib/components/ui/command";
  import * as Popover from "$lib/components/ui/popover";
  import { Button } from "$lib/components/ui/button";
  import { cn } from "$lib/utils";
  import { tick } from "svelte";
 
  const frameworks = [
    {
      value: "sveltekit",
      label: "SvelteKit"
    },
    {
      value: "next.js",
      label: "Next.js"
    },
    {
      value: "nuxt.js",
      label: "Nuxt.js"
    },
    {
      value: "remix",
      label: "Remix"
    },
    {
      value: "astro",
      label: "Astro"
    }
  ];
 
  let open = false;
  let value = "";
 
  $: selectedValue =
    frameworks.find((f) => f.value === value)?.label ?? "Select a framework...";
 
  // We want to refocus the trigger button when the user selects
  // an item from the list so users can continue navigating the
  // rest of the form with the keyboard.
  function closeAndFocusTrigger(triggerId: string) {
    open = false;
    tick().then(() => {
      document.getElementById(triggerId)?.focus();
    });
  }
</script>
 
<Popover.Root bind:open let:ids>
  <Popover.Trigger asChild let:builder>
    <Button
      builders={[builder]}
      variant="outline"
      role="combobox"
      aria-expanded={open}
      class="w-[200px] justify-between"
    >
      {selectedValue}
      <CaretSort class="ml-2 h-4 w-4 shrink-0 opacity-50" />
    </Button>
  </Popover.Trigger>
  <Popover.Content class="w-[200px] p-0">
    <Command.Root>
      <Command.Input placeholder="Search framework..." class="h-9" />
      <Command.Empty>No framework found.</Command.Empty>
      <Command.Group>
        {#each frameworks as framework}
          <Command.Item
            value={framework.value}
            onSelect={(currentValue) => {
              value = currentValue;
              closeAndFocusTrigger(ids.trigger);
            }}
          >
            <Check
              class={cn(
                "mr-2 h-4 w-4",
                value !== framework.value && "text-transparent"
              )}
            />
            {framework.label}
          </Command.Item>
        {/each}
      </Command.Group>
    </Command.Root>
  </Popover.Content>
</Popover.Root>

	<script lang="ts">
  import Check from "lucide-svelte/icons/check";
  import ChevronsUpDown from "lucide-svelte/icons/chevrons-up-down";
  import * as Command from "$lib/components/ui/command";
  import * as Popover from "$lib/components/ui/popover";
  import { Button } from "$lib/components/ui/button";
  import { cn } from "$lib/utils";
  import { tick } from "svelte";
 
  const frameworks = [
    {
      value: "sveltekit",
      label: "SvelteKit"
    },
    {
      value: "next.js",
      label: "Next.js"
    },
    {
      value: "nuxt.js",
      label: "Nuxt.js"
    },
    {
      value: "remix",
      label: "Remix"
    },
    {
      value: "astro",
      label: "Astro"
    }
  ];
 
  let open = false;
  let value = "";
 
  $: selectedValue =
    frameworks.find((f) => f.value === value)?.label ?? "Select a framework...";
 
  // We want to refocus the trigger button when the user selects
  // an item from the list so users can continue navigating the
  // rest of the form with the keyboard.
  function closeAndFocusTrigger(triggerId: string) {
    open = false;
    tick().then(() => {
      document.getElementById(triggerId)?.focus();
    });
  }
</script>
 
<Popover.Root bind:open let:ids>
  <Popover.Trigger asChild let:builder>
    <Button
      builders={[builder]}
      variant="outline"
      role="combobox"
      aria-expanded={open}
      class="w-[200px] justify-between"
    >
      {selectedValue}
      <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
    </Button>
  </Popover.Trigger>
  <Popover.Content class="w-[200px] p-0">
    <Command.Root>
      <Command.Input placeholder="Search framework..." />
      <Command.Empty>No framework found.</Command.Empty>
      <Command.Group>
        {#each frameworks as framework}
          <Command.Item
            value={framework.value}
            onSelect={(currentValue) => {
              value = currentValue;
              closeAndFocusTrigger(ids.trigger);
            }}
          >
            <Check
              class={cn(
                "mr-2 h-4 w-4",
                value !== framework.value && "text-transparent"
              )}
            />
            {framework.label}
          </Command.Item>
        {/each}
      </Command.Group>
    </Command.Root>
  </Popover.Content>
</Popover.Root>

	<script lang="ts">
  import Check from "svelte-radix/Check.svelte";
  import CaretSort from "svelte-radix/CaretSort.svelte";
  import * as Command from "$lib/components/ui/command";
  import * as Popover from "$lib/components/ui/popover";
  import { Button } from "$lib/components/ui/button";
  import { cn } from "$lib/utils";
  import { tick } from "svelte";
 
  const frameworks = [
    {
      value: "sveltekit",
      label: "SvelteKit"
    },
    {
      value: "next.js",
      label: "Next.js"
    },
    {
      value: "nuxt.js",
      label: "Nuxt.js"
    },
    {
      value: "remix",
      label: "Remix"
    },
    {
      value: "astro",
      label: "Astro"
    }
  ];
 
  let open = false;
  let value = "";
 
  $: selectedValue =
    frameworks.find((f) => f.value === value)?.label ?? "Select a framework...";
 
  // We want to refocus the trigger button when the user selects
  // an item from the list so users can continue navigating the
  // rest of the form with the keyboard.
  function closeAndFocusTrigger(triggerId: string) {
    open = false;
    tick().then(() => {
      document.getElementById(triggerId)?.focus();
    });
  }
</script>
 
<Popover.Root bind:open let:ids>
  <Popover.Trigger asChild let:builder>
    <Button
      builders={[builder]}
      variant="outline"
      role="combobox"
      aria-expanded={open}
      class="w-[200px] justify-between"
    >
      {selectedValue}
      <CaretSort class="ml-2 h-4 w-4 shrink-0 opacity-50" />
    </Button>
  </Popover.Trigger>
  <Popover.Content class="w-[200px] p-0">
    <Command.Root>
      <Command.Input placeholder="Search framework..." class="h-9" />
      <Command.Empty>No framework found.</Command.Empty>
      <Command.Group>
        {#each frameworks as framework}
          <Command.Item
            value={framework.value}
            onSelect={(currentValue) => {
              value = currentValue;
              closeAndFocusTrigger(ids.trigger);
            }}
          >
            <Check
              class={cn(
                "mr-2 h-4 w-4",
                value !== framework.value && "text-transparent"
              )}
            />
            {framework.label}
          </Command.Item>
        {/each}
      </Command.Group>
    </Command.Root>
  </Popover.Content>
</Popover.Root>

	<script lang="ts">
  import Check from "lucide-svelte/icons/check";
  import ChevronsUpDown from "lucide-svelte/icons/chevrons-up-down";
  import * as Command from "$lib/components/ui/command";
  import * as Popover from "$lib/components/ui/popover";
  import { Button } from "$lib/components/ui/button";
  import { cn } from "$lib/utils";
  import { tick } from "svelte";
 
  const frameworks = [
    {
      value: "sveltekit",
      label: "SvelteKit"
    },
    {
      value: "next.js",
      label: "Next.js"
    },
    {
      value: "nuxt.js",
      label: "Nuxt.js"
    },
    {
      value: "remix",
      label: "Remix"
    },
    {
      value: "astro",
      label: "Astro"
    }
  ];
 
  let open = false;
  let value = "";
 
  $: selectedValue =
    frameworks.find((f) => f.value === value)?.label ?? "Select a framework...";
 
  // We want to refocus the trigger button when the user selects
  // an item from the list so users can continue navigating the
  // rest of the form with the keyboard.
  function closeAndFocusTrigger(triggerId: string) {
    open = false;
    tick().then(() => {
      document.getElementById(triggerId)?.focus();
    });
  }
</script>
 
<Popover.Root bind:open let:ids>
  <Popover.Trigger asChild let:builder>
    <Button
      builders={[builder]}
      variant="outline"
      role="combobox"
      aria-expanded={open}
      class="w-[200px] justify-between"
    >
      {selectedValue}
      <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
    </Button>
  </Popover.Trigger>
  <Popover.Content class="w-[200px] p-0">
    <Command.Root>
      <Command.Input placeholder="Search framework..." />
      <Command.Empty>No framework found.</Command.Empty>
      <Command.Group>
        {#each frameworks as framework}
          <Command.Item
            value={framework.value}
            onSelect={(currentValue) => {
              value = currentValue;
              closeAndFocusTrigger(ids.trigger);
            }}
          >
            <Check
              class={cn(
                "mr-2 h-4 w-4",
                value !== framework.value && "text-transparent"
              )}
            />
            {framework.label}
          </Command.Item>
        {/each}
      </Command.Group>
    </Command.Root>
  </Popover.Content>
</Popover.Root>

	<script lang="ts">
  import * as Command from "$lib/components/ui/command";
  import * as Popover from "$lib/components/ui/popover";
  import { Button } from "$lib/components/ui/button";
  import { tick } from "svelte";
 
  type Status = {
    value: string;
    label: string;
  };
 
  const statuses: Status[] = [
    {
      value: "backlog",
      label: "Backlog"
    },
    {
      value: "todo",
      label: "Todo"
    },
    {
      value: "in progress",
      label: "In Progress"
    },
    {
      value: "done",
      label: "Done"
    },
    {
      value: "canceled",
      label: "Canceled"
    }
  ];
 
  let open = false;
  let value = "";
 
  $: selectedStatus = statuses.find((s) => s.value === value) ?? null;
 
  // We want to refocus the trigger button when the user selects
  // an item from the list so users can continue navigating the
  // rest of the form with the keyboard.
  function closeAndFocusTrigger(triggerId: string) {
    open = false;
    tick().then(() => {
      document.getElementById(triggerId)?.focus();
    });
  }
</script>
 
<div class="flex items-center space-x-4">
  <p class="text-sm text-muted-foreground">Status</p>
  <Popover.Root bind:open let:ids>
    <Popover.Trigger asChild let:builder>
      <Button
        builders={[builder]}
        variant="outline"
        class="w-[150px] justify-start"
      >
        {selectedStatus ? selectedStatus.label : "+ Set status"}
      </Button>
    </Popover.Trigger>
    <Popover.Content class="p-0" align="start" side="right">
      <Command.Root>
        <Command.Input placeholder="Change status..." />
        <Command.List>
          <Command.Empty>No results found.</Command.Empty>
          <Command.Group>
            {#each statuses as status}
              <Command.Item
                value={status.value}
                onSelect={(currentValue) => {
                  value = currentValue;
                  closeAndFocusTrigger(ids.trigger);
                }}
              >
                {status.label}
              </Command.Item>
            {/each}
          </Command.Group>
        </Command.List>
      </Command.Root>
    </Popover.Content>
  </Popover.Root>
</div>

	<script lang="ts">
  import ArrowUpCircle from "lucide-svelte/icons/arrow-up-circle";
  import CheckCircle2 from "lucide-svelte/icons/check-circle-2";
  import Circle from "lucide-svelte/icons/circle";
  import HelpCircle from "lucide-svelte/icons/help-circle";
  import XCircle from "lucide-svelte/icons/x-circle";
  import * as Command from "$lib/components/ui/command";
  import * as Popover from "$lib/components/ui/popover";
  import { Button } from "$lib/components/ui/button";
  import { cn } from "$lib/utils";
  import { tick, type ComponentType } from "svelte";
 
  type Status = {
    value: string;
    label: string;
    icon: ComponentType;
  };
 
  const statuses: Status[] = [
    {
      value: "backlog",
      label: "Backlog",
      icon: HelpCircle
    },
    {
      value: "todo",
      label: "Todo",
      icon: Circle
    },
    {
      value: "in progress",
      label: "In Progress",
      icon: ArrowUpCircle
    },
    {
      value: "done",
      label: "Done",
      icon: CheckCircle2
    },
    {
      value: "canceled",
      label: "Canceled",
      icon: XCircle
    }
  ];
 
  let open = false;
  let value = "";
 
  $: selectedStatus = statuses.find((s) => s.value === value) ?? null;
 
  // We want to refocus the trigger button when the user selects
  // an item from the list so users can continue navigating the
  // rest of the form with the keyboard.
  function closeAndFocusTrigger(triggerId: string) {
    open = false;
    tick().then(() => {
      document.getElementById(triggerId)?.focus();
    });
  }
</script>
 
<div class="flex items-center space-x-4">
  <p class="text-sm text-muted-foreground">Status</p>
  <Popover.Root bind:open let:ids>
    <Popover.Trigger asChild let:builder>
      <Button
        builders={[builder]}
        variant="outline"
        size="sm"
        class="w-[150px] justify-start"
      >
        {#if selectedStatus}
          <svelte:component
            this={selectedStatus.icon}
            class="mr-2 h-4 w-4 shrink-0"
          />
          {selectedStatus.label}
        {:else}
          + Set status
        {/if}
      </Button>
    </Popover.Trigger>
    <Popover.Content class="w-[200px] p-0" side="right" align="start">
      <Command.Root>
        <Command.Input placeholder="Change status..." />
        <Command.List>
          <Command.Empty>No results found.</Command.Empty>
          <Command.Group>
            {#each statuses as status}
              <Command.Item
                value={status.value}
                onSelect={(currentValue) => {
                  value = currentValue;
                  closeAndFocusTrigger(ids.trigger);
                }}
              >
                <svelte:component
                  this={status.icon}
                  class={cn(
                    "mr-2 h-4 w-4",
                    status.value !== selectedStatus?.value &&
                      "text-foreground/40"
                  )}
                />
 
                <span>
                  {status.label}
                </span>
              </Command.Item>
            {/each}
          </Command.Group>
        </Command.List>
      </Command.Root>
    </Popover.Content>
  </Popover.Root>
</div>

	<script lang="ts">
  import DotsHorizontal from "svelte-radix/DotsHorizontal.svelte";
  import * as Command from "$lib/components/ui/command";
  import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
  import { Button } from "$lib/components/ui/button";
  import { tick } from "svelte";
 
  const labels = [
    "feature",
    "bug",
    "enhancement",
    "documentation",
    "design",
    "question",
    "maintenance"
  ];
 
  let open = false;
  let selectedLabel = "feature";
 
  // We want to refocus the trigger button when the user selects
  // an item from the list so users can continue navigating the
  // rest of the form with the keyboard.
  function closeAndFocusTrigger(triggerId: string) {
    open = false;
    tick().then(() => {
      document.getElementById(triggerId)?.focus();
    });
  }
</script>
 
<div
  class="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center"
>
  <p class="text-sm font-medium leading-none">
    <span
      class="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground"
    >
      {selectedLabel}
    </span>
    <span class="text-muted-foreground">Create a new project</span>
  </p>
  <DropdownMenu.Root bind:open let:ids>
    <DropdownMenu.Trigger asChild let:builder>
      <Button
        builders={[builder]}
        variant="ghost"
        size="sm"
        aria-label="Open menu"
      >
        <DotsHorizontal />
      </Button>
    </DropdownMenu.Trigger>
    <DropdownMenu.Content class="w-[200px]" align="end">
      <DropdownMenu.Group>
        <DropdownMenu.Label>Actions</DropdownMenu.Label>
        <DropdownMenu.Item>Assign to...</DropdownMenu.Item>
        <DropdownMenu.Item>Set due date...</DropdownMenu.Item>
        <DropdownMenu.Separator />
        <DropdownMenu.Sub>
          <DropdownMenu.SubTrigger>Apply label</DropdownMenu.SubTrigger>
          <DropdownMenu.SubContent class="p-0">
            <Command.Root value={selectedLabel}>
              <Command.Input
                autofocus
                placeholder="Filter label..."
                class="h-9"
              />
              <Command.List>
                <Command.Empty>No label found.</Command.Empty>
                <Command.Group>
                  {#each labels as label}
                    <Command.Item
                      value={label}
                      onSelect={(value) => {
                        selectedLabel = value;
                        closeAndFocusTrigger(ids.trigger);
                      }}
                    >
                      {label}
                    </Command.Item>
                  {/each}
                </Command.Group>
              </Command.List>
            </Command.Root>
          </DropdownMenu.SubContent>
        </DropdownMenu.Sub>
        <DropdownMenu.Separator />
        <DropdownMenu.Item class="text-red-600">
          Delete
          <DropdownMenu.Shortcut>⌘⌫</DropdownMenu.Shortcut>
        </DropdownMenu.Item>
      </DropdownMenu.Group>
    </DropdownMenu.Content>
  </DropdownMenu.Root>
</div>

	<script lang="ts">
  import Calendar from "lucide-svelte/icons/calendar";
  import MoreHorizontal from "lucide-svelte/icons/more-horizontal";
  import Tags from "lucide-svelte/icons/tags";
  import Trash from "lucide-svelte/icons/trash";
  import User from "lucide-svelte/icons/user";
  import * as Command from "$lib/components/ui/command";
  import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
  import { Button } from "$lib/components/ui/button";
  import { tick } from "svelte";
 
  const labels = [
    "feature",
    "bug",
    "enhancement",
    "documentation",
    "design",
    "question",
    "maintenance"
  ];
 
  let open = false;
  let selectedLabel = "feature";
 
  // We want to refocus the trigger button when the user selects
  // an item from the list so users can continue navigating the
  // rest of the form with the keyboard.
  function closeAndFocusTrigger(triggerId: string) {
    open = false;
    tick().then(() => {
      document.getElementById(triggerId)?.focus();
    });
  }
</script>
 
<div
  class="flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center"
>
  <p class="text-sm font-medium leading-none">
    <span
      class="mr-2 rounded-lg bg-primary px-2 py-1 text-xs text-primary-foreground"
    >
      {selectedLabel}
    </span>
    <span class="text-muted-foreground">Create a new project</span>
  </p>
  <DropdownMenu.Root bind:open let:ids>
    <DropdownMenu.Trigger asChild let:builder>
      <Button
        builders={[builder]}
        variant="ghost"
        size="sm"
        aria-label="Open menu"
      >
        <MoreHorizontal />
      </Button>
    </DropdownMenu.Trigger>
    <DropdownMenu.Content class="w-[200px]" align="end">
      <DropdownMenu.Group>
        <DropdownMenu.Label>Actions</DropdownMenu.Label>
        <DropdownMenu.Item>
          <User class="mr-2 h-4 w-4" />
          Assign to...
        </DropdownMenu.Item>
        <DropdownMenu.Item>
          <Calendar class="mr-2 h-4 w-4" />
          Set due date...
        </DropdownMenu.Item>
        <DropdownMenu.Separator />
        <DropdownMenu.Sub>
          <DropdownMenu.SubTrigger>
            <Tags class="mr-2 h-4 w-4" />
            Apply label
          </DropdownMenu.SubTrigger>
          <DropdownMenu.SubContent class="p-0">
            <Command.Root value={selectedLabel}>
              <Command.Input autofocus placeholder="Filter label..." />
              <Command.List>
                <Command.Empty>No label found.</Command.Empty>
                <Command.Group>
                  {#each labels as label}
                    <Command.Item
                      value={label}
                      onSelect={(value) => {
                        selectedLabel = value;
                        closeAndFocusTrigger(ids.trigger);
                      }}
                    >
                      {label}
                    </Command.Item>
                  {/each}
                </Command.Group>
              </Command.List>
            </Command.Root>
          </DropdownMenu.SubContent>
        </DropdownMenu.Sub>
        <DropdownMenu.Separator />
        <DropdownMenu.Item class="text-red-600">
          <Trash class="mr-2 h-4 w-4" />
          Delete
          <DropdownMenu.Shortcut>⌘⌫</DropdownMenu.Shortcut>
        </DropdownMenu.Item>
      </DropdownMenu.Group>
    </DropdownMenu.Content>
  </DropdownMenu.Root>
</div>

	<script lang="ts" context="module">
  import { z } from "zod";
 
  const languages = [
    { label: "English", value: "en" },
    { label: "French", value: "fr" },
    { label: "German", value: "de" },
    { label: "Spanish", value: "es" },
    { label: "Portuguese", value: "pt" },
    { label: "Russian", value: "ru" },
    { label: "Japanese", value: "ja" },
    { label: "Korean", value: "ko" },
    { label: "Chinese", value: "zh" }
  ] as const;
 
  type Language = (typeof languages)[number]["value"];
 
  export const formSchema = z.object({
    language: z.enum(
      languages.map((f) => f.value) as [Language, ...Language[]],
      {
        errorMap: () => ({ message: "Please select a valid language." })
      }
    )
  });
 
  export type FormSchema = typeof formSchema;
</script>
 
<script lang="ts">
  import { browser } from "$app/environment";
  import Check from "svelte-radix/Check.svelte";
  import CaretSort from "svelte-radix/CaretSort.svelte";
  import { page } from "$app/stores";
  import * as Form from "$lib/components/ui/form";
  import * as Popover from "$lib/components/ui/popover";
  import * as Command from "$lib/components/ui/command";
  import SuperDebug, {
    type SuperValidated,
    type Infer,
    superForm
  } from "sveltekit-superforms";
  import { cn } from "@/utils";
  import { tick } from "svelte";
  import { zodClient } from "sveltekit-superforms/adapters";
  import { buttonVariants } from "$lib/components/ui/button";
  import { toast } from "svelte-sonner";
  let data: SuperValidated<Infer<FormSchema>> = $page.data.combobox;
  export { data as form };
 
  const form = superForm(data, {
    validators: zodClient(formSchema),
    onUpdated: ({ form: f }) => {
      if (f.valid) {
        toast.success("You submitted" + JSON.stringify(f.data, null, 2));
      } else {
        toast.error("Please fix the errors in the form.");
      }
    }
  });
 
  const { form: formData, enhance } = form;
 
  let open = false;
 
  // We want to refocus the trigger button when the user selects
  // an item from the list so users can continue navigating the
  // rest of the form with the keyboard.
  function closeAndFocusTrigger(triggerId: string) {
    open = false;
    tick().then(() => {
      document.getElementById(triggerId)?.focus();
    });
  }
</script>
 
<form method="POST" action="?/combobox" class="space-y-6" use:enhance>
  <Form.Field {form} name="language" class="flex flex-col">
    <Popover.Root bind:open let:ids>
      <Form.Control let:attrs>
        <Form.Label>Language</Form.Label>
        <Popover.Trigger
          class={cn(
            buttonVariants({ variant: "outline" }),
            "w-[200px] justify-between",
            !$formData.language && "text-muted-foreground"
          )}
          role="combobox"
          {...attrs}
        >
          {languages.find((f) => f.value === $formData.language)?.label ??
            "Select language"}
          <CaretSort class="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Popover.Trigger>
        <input hidden value={$formData.language} name={attrs.name} />
      </Form.Control>
      <Popover.Content class="w-[200px] p-0">
        <Command.Root>
          <Command.Input
            autofocus
            placeholder="Search language..."
            class="h-9"
          />
          <Command.Empty>No language found.</Command.Empty>
          <Command.Group>
            {#each languages as language}
              <Command.Item
                value={language.value}
                onSelect={() => {
                  $formData.language = language.value;
                  closeAndFocusTrigger(ids.trigger);
                }}
              >
                {language.label}
                <Check
                  class={cn(
                    "ml-auto h-4 w-4",
                    language.value !== $formData.language && "text-transparent"
                  )}
                />
              </Command.Item>
            {/each}
          </Command.Group>
        </Command.Root>
      </Popover.Content>
    </Popover.Root>
    <Form.Description>
      This is the language that will be used in the dashboard.
    </Form.Description>
    <Form.FieldErrors />
  </Form.Field>
  <Form.Button>Submit</Form.Button>
  {#if browser}
    <SuperDebug data={$formData} />
  {/if}
</form>

	<script lang="ts" context="module">
  import { z } from "zod";
 
  const languages = [
    { label: "English", value: "en" },
    { label: "French", value: "fr" },
    { label: "German", value: "de" },
    { label: "Spanish", value: "es" },
    { label: "Portuguese", value: "pt" },
    { label: "Russian", value: "ru" },
    { label: "Japanese", value: "ja" },
    { label: "Korean", value: "ko" },
    { label: "Chinese", value: "zh" }
  ] as const;
 
  type Language = (typeof languages)[number]["value"];
 
  export const formSchema = z.object({
    language: z.enum(
      languages.map((f) => f.value) as [Language, ...Language[]],
      {
        errorMap: () => ({ message: "Please select a valid language." })
      }
    )
  });
 
  export type FormSchema = typeof formSchema;
</script>
 
<script lang="ts">
  import { browser } from "$app/environment";
  import { page } from "$app/stores";
  import * as Form from "$lib/components/ui/form";
  import * as Popover from "$lib/components/ui/popover";
  import * as Command from "$lib/components/ui/command";
  import SuperDebug, {
    type SuperValidated,
    type Infer,
    superForm
  } from "sveltekit-superforms";
  import { cn } from "@/utils";
  import { tick } from "svelte";
  import Check from "lucide-svelte/icons/check";
  import ChevronsUpDown from "lucide-svelte/icons/chevrons-up-down";
  import { zodClient } from "sveltekit-superforms/adapters";
  import { buttonVariants } from "$lib/components/ui/button";
  import { toast } from "svelte-sonner";
  let data: SuperValidated<Infer<FormSchema>> = $page.data.combobox;
  export { data as form };
 
  const form = superForm(data, {
    validators: zodClient(formSchema),
    onUpdated: ({ form: f }) => {
      if (f.valid) {
        toast.success("You submitted" + JSON.stringify(f.data, null, 2));
      } else {
        toast.error("Please fix the errors in the form.");
      }
    }
  });
 
  const { form: formData, enhance } = form;
 
  let open = false;
 
  // We want to refocus the trigger button when the user selects
  // an item from the list so users can continue navigating the
  // rest of the form with the keyboard.
  function closeAndFocusTrigger(triggerId: string) {
    open = false;
    tick().then(() => {
      document.getElementById(triggerId)?.focus();
    });
  }
</script>
 
<form method="POST" action="?/combobox" class="space-y-6" use:enhance>
  <Form.Field {form} name="language" class="flex flex-col">
    <Popover.Root bind:open let:ids>
      <Form.Control let:attrs>
        <Form.Label>Language</Form.Label>
        <Popover.Trigger
          class={cn(
            buttonVariants({ variant: "outline" }),
            "w-[200px] justify-between",
            !$formData.language && "text-muted-foreground"
          )}
          role="combobox"
          {...attrs}
        >
          {languages.find((f) => f.value === $formData.language)?.label ??
            "Select language"}
          <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Popover.Trigger>
        <input hidden value={$formData.language} name={attrs.name} />
      </Form.Control>
      <Popover.Content class="w-[200px] p-0">
        <Command.Root>
          <Command.Input
            autofocus
            placeholder="Search language..."
            class="h-9"
          />
          <Command.Empty>No language found.</Command.Empty>
          <Command.Group>
            {#each languages as language}
              <Command.Item
                value={language.value}
                onSelect={() => {
                  $formData.language = language.value;
                  closeAndFocusTrigger(ids.trigger);
                }}
              >
                {language.label}
                <Check
                  class={cn(
                    "ml-auto h-4 w-4",
                    language.value !== $formData.language && "text-transparent"
                  )}
                />
              </Command.Item>
            {/each}
          </Command.Group>
        </Command.Root>
      </Popover.Content>
    </Popover.Root>
    <Form.Description>
      This is the language that will be used in the dashboard.
    </Form.Description>
    <Form.FieldErrors />
  </Form.Field>
  <Form.Button>Submit</Form.Button>
  {#if browser}
    <SuperDebug data={$formData} />
  {/if}
</form>