Select

1import type { JSX, ValidComponent } from "solid-js"
2import { splitProps } from "solid-js"
3 
4import type { PolymorphicProps } from "@kobalte/core/polymorphic"
5import * as SelectPrimitive from "@kobalte/core/select"
6import { cva } from "class-variance-authority"
7 
8import { cn } from "~/lib/utils"
9 
10const Select = SelectPrimitive.Root
11const SelectValue = SelectPrimitive.Value
12const SelectHiddenSelect = SelectPrimitive.HiddenSelect
13 
14type SelectTriggerProps<T extends ValidComponent = "button"> =
15  SelectPrimitive.SelectTriggerProps<T> & {
16    class?: string | undefined
17    children?: JSX.Element
18  }
19 
20const SelectTrigger = <T extends ValidComponent = "button">(
21  props: PolymorphicProps<T, SelectTriggerProps<T>>
22) => {
23  const [local, others] = splitProps(props as SelectTriggerProps, ["class", "children"])
24  return (
25    <SelectPrimitive.Trigger
26      class={cn(
27        "flex h-10 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
28        local.class
29      )}
30      {...others}
31    >
32      {local.children}
33      <SelectPrimitive.Icon
34        as="svg"
35        xmlns="http://www.w3.org/2000/svg"
36        viewBox="0 0 24 24"
37        fill="none"
38        stroke="currentColor"
39        stroke-width="2"
40        stroke-linecap="round"
41        stroke-linejoin="round"
42        class="size-4 opacity-50"
43      >
44        <path d="M8 9l4 -4l4 4" />
45        <path d="M16 15l-4 4l-4 -4" />
46      </SelectPrimitive.Icon>
47    </SelectPrimitive.Trigger>
48  )
49}
50 
51type SelectContentProps<T extends ValidComponent = "div"> =
52  SelectPrimitive.SelectContentProps<T> & { class?: string | undefined }
53 
54const SelectContent = <T extends ValidComponent = "div">(
55  props: PolymorphicProps<T, SelectContentProps<T>>
56) => {
57  const [local, others] = splitProps(props as SelectContentProps, ["class"])
58  return (
59    <SelectPrimitive.Portal>
60      <SelectPrimitive.Content
61        class={cn(
62          "relative z-50 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80",
63          local.class
64        )}
65        {...others}
66      >
67        <SelectPrimitive.Listbox class="m-0 p-1" />
68      </SelectPrimitive.Content>
69    </SelectPrimitive.Portal>
70  )
71}
72 
73// … truncated