select

1import type { PolymorphicProps } from "@kobalte/core/polymorphic";
2import * as SelectPrimitive from "@kobalte/core/select";
3 
4import { cn } from "~/lib/utils.ts";
5 
6import IconCheck from "~icons/lucide/check";
7import IconChevronDown from "~icons/lucide/chevron-down";
8import type { Component, ComponentProps, JSX, ValidComponent } from "solid-js";
9import { mergeProps, splitProps } from "solid-js";
10 
11// Unlike radix, Kobalte's Root renders a real <div> wrapping the
12// trigger, so the slot marks the element grouped containers (e.g.
13// button-group) match on.
14const Select = <Option, OptGroup = never, T extends ValidComponent = "div">(
15  props: PolymorphicProps<
16    T,
17    SelectPrimitive.SelectRootProps<Option, OptGroup, T>
18  >,
19) => (
20  <SelectPrimitive.Root
21    data-slot="select"
22    {...(props as SelectPrimitive.SelectRootProps<Option, OptGroup>)}
23  />
24);
25 
26const SelectHiddenSelect = SelectPrimitive.HiddenSelect;
27 
28type SelectValueProps<Option, T extends ValidComponent = "span"> =
29  SelectPrimitive.SelectValueProps<Option, T>;
30 
31const SelectValue = <Option, T extends ValidComponent = "span">(
32  props: PolymorphicProps<T, SelectValueProps<Option, T>>,
33) => (
34  <SelectPrimitive.Value
35    data-slot="select-value"
36    {...(props as SelectValueProps<Option>)}
37  />
38);
39 
40type SelectTriggerProps<T extends ValidComponent = "button"> =
41  & SelectPrimitive.SelectTriggerProps<T>
42  & {
43    class?: string | undefined;
44    children?: JSX.Element;
45    size?: "sm" | "default";
46  };
47 
48const SelectTrigger = <T extends ValidComponent = "button">(
49  rawProps: PolymorphicProps<T, SelectTriggerProps<T>>,
50) => {
51  const props = mergeProps(
52    { size: "default" as const },
53    rawProps as SelectTriggerProps,
54  );
55  const [local, others] = splitProps(props, ["class", "children", "size"]);
56  return (
57    <SelectPrimitive.Trigger
58      data-slot="select-trigger"
59      data-size={local.size}
60      class={cn(
61// … truncated