Combobox

1import { Combobox as KobalteCombobox } from "@kobalte/core/combobox";
2import { Check, ChevronsUpDown } from "lucide-solid";
3import type { Component, ComponentProps } from "solid-js";
4import { splitProps } from "solid-js";
5import { cn } from "~/lib/utils";
6 
7const Combobox = KobalteCombobox;
8 
9const ComboboxTrigger: Component<{ class?: string }> = (props) => {
10  return (
11    <KobalteCombobox.Control class={cn("flex items-center", props.class)}>
12      <KobalteCombobox.Input
13        class={cn(
14          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2",
15          "text-sm ring-offset-background placeholder:text-muted-foreground",
16          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
17          "disabled:cursor-not-allowed disabled:opacity-50",
18        )}
19      />
20      <KobalteCombobox.Trigger class="-ml-10 flex h-10 w-10 items-center justify-center">
21        <ChevronsUpDown class="h-4 w-4 opacity-50" />
22      </KobalteCombobox.Trigger>
23    </KobalteCombobox.Control>
24  );
25};
26 
27const ComboboxContent: Component<ComponentProps<typeof KobalteCombobox.Content>> = (props) => {
28  const [local, rest] = splitProps(props, ["class"]);
29  return (
30    <KobalteCombobox.Portal>
31      <KobalteCombobox.Content
32        class={cn(
33          "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
34          "data-[expanded]:animate-in data-[closed]:animate-out",
35          "data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
36          "data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95",
37          local.class,
38        )}
39        {...rest}
40      >
41        <KobalteCombobox.Listbox class="p-1" />
42      </KobalteCombobox.Content>
43    </KobalteCombobox.Portal>
44  );
45};
46 
47const ComboboxItem: Component<ComponentProps<typeof KobalteCombobox.Item>> = (props) => {
48  const [local, rest] = splitProps(props, ["class", "children"]);
49  return (
50    <KobalteCombobox.Item
51      class={cn(
52        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
53        "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground",
54        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
55        local.class,
56      )}
57      {...rest}
58    >
59      <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
60        <KobalteCombobox.ItemIndicator>
61// … truncated