Select

1import { Select as KobalteSelect } from "@kobalte/core/select";
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 Select = KobalteSelect;
8 
9const SelectTrigger: Component<
10  ComponentProps<typeof KobalteSelect.Trigger> & { placeholder?: string }
11> = (props) => {
12  const [local, rest] = splitProps(props, ["class", "placeholder"]);
13  return (
14    <KobalteSelect.Trigger
15      class={cn(
16        "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2",
17        "text-sm ring-offset-background",
18        "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
19        "disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
20        local.class,
21      )}
22      {...rest}
23    >
24      <KobalteSelect.Value<string>>
25        {(state) => state.selectedOption() ?? local.placeholder ?? "Select..."}
26      </KobalteSelect.Value>
27      <KobalteSelect.Icon>
28        <ChevronsUpDown class="h-4 w-4 opacity-50" />
29      </KobalteSelect.Icon>
30    </KobalteSelect.Trigger>
31  );
32};
33 
34const SelectContent: Component<ComponentProps<typeof KobalteSelect.Content>> = (props) => {
35  const [local, rest] = splitProps(props, ["class"]);
36  return (
37    <KobalteSelect.Portal>
38      <KobalteSelect.Content
39        class={cn(
40          "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
41          "data-[expanded]:animate-in data-[closed]:animate-out",
42          "data-[closed]:fade-out-0 data-[expanded]:fade-in-0",
43          "data-[closed]:zoom-out-95 data-[expanded]:zoom-in-95",
44          local.class,
45        )}
46        {...rest}
47      >
48        <KobalteSelect.Listbox class="p-1" />
49      </KobalteSelect.Content>
50    </KobalteSelect.Portal>
51  );
52};
53 
54const SelectItem: Component<ComponentProps<typeof KobalteSelect.Item>> = (props) => {
55  const [local, rest] = splitProps(props, ["class", "children"]);
56  return (
57    <KobalteSelect.Item
58      class={cn(
59        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none",
60        "focus:bg-accent focus:text-accent-foreground",
61        "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
62        local.class,
63      )}
64      {...rest}
65    >
66// … truncated