Combobox

1import type { JSX, ValidComponent } from "solid-js"
2import { Show, splitProps } from "solid-js"
3 
4import * as ComboboxPrimitive from "@kobalte/core/combobox"
5import type { PolymorphicProps } from "@kobalte/core/polymorphic"
6 
7import { cn } from "~/lib/utils"
8 
9const Combobox = ComboboxPrimitive.Root
10const ComboboxItemLabel = ComboboxPrimitive.ItemLabel
11const ComboboxHiddenSelect = ComboboxPrimitive.HiddenSelect
12 
13type ComboboxItemProps<T extends ValidComponent = "li"> = ComboboxPrimitive.ComboboxItemProps<T> & {
14  class?: string | undefined
15}
16 
17const ComboboxItem = <T extends ValidComponent = "li">(
18  props: PolymorphicProps<T, ComboboxItemProps<T>>
19) => {
20  const [local, others] = splitProps(props as ComboboxItemProps, ["class"])
21  return (
22    <ComboboxPrimitive.Item
23      class={cn(
24        "relative flex cursor-default select-none items-center justify-between rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:opacity-50",
25        local.class
26      )}
27      {...others}
28    />
29  )
30}
31 
32type ComboboxItemIndicatorProps<T extends ValidComponent = "div"> =
33  ComboboxPrimitive.ComboboxItemIndicatorProps<T> & {
34    children?: JSX.Element
35  }
36 
37const ComboboxItemIndicator = <T extends ValidComponent = "div">(
38  props: PolymorphicProps<T, ComboboxItemIndicatorProps<T>>
39) => {
40  const [local, others] = splitProps(props as ComboboxItemIndicatorProps, ["children"])
41  return (
42    <ComboboxPrimitive.ItemIndicator {...others}>
43      <Show
44        when={local.children}
45        fallback={
46          <svg
47            xmlns="http://www.w3.org/2000/svg"
48            viewBox="0 0 24 24"
49            fill="none"
50            stroke="currentColor"
51            stroke-width="2"
52            stroke-linecap="round"
53            stroke-linejoin="round"
54            class="size-4"
55          >
56            <path d="M5 12l5 5l10 -10" />
57          </svg>
58        }
59      >
60        {(children) => children()}
61      </Show>
62    </ComboboxPrimitive.ItemIndicator>
63  )
64}
65 
66type ComboboxSectionProps<T extends ValidComponent = "li"> =
67  ComboboxPrimitive.ComboboxSectionProps<T> & { class?: string | undefined }
68 
69const ComboboxSection = <T extends ValidComponent = "li">(
70  props: PolymorphicProps<T, ComboboxSectionProps<T>>
71) => {
72  const [local, others] = splitProps(props as ComboboxSectionProps, ["class"])
73  return (
74    <ComboboxPrimitive.Section
75      class={cn(
76// … truncated