native-select

1import { cn } from "~/lib/utils.ts";
2import IconChevronDown from "~icons/lucide/chevron-down";
3 
4import type { Component, ComponentProps } from "solid-js";
5 
6import { splitProps } from "solid-js";
7 
8// `size` on a native select is the number of visible rows; the design system
9// uses it for the control height instead, so the native attribute is omitted
10// exactly like upstream does.
11type NativeSelectProps =
12  & Omit<ComponentProps<"select">, "size">
13  & { size?: "sm" | "default" };
14 
15const NativeSelect: Component<NativeSelectProps> = (props) => {
16  const [local, others] = splitProps(props, ["class", "size"]);
17  return (
18    <div
19      class={cn(
20        "group/native-select relative w-fit has-[select:disabled]:opacity-50",
21        local.class,
22      )}
23      data-slot="native-select-wrapper"
24      data-size={local.size ?? "default"}
25    >
26      <select
27        data-slot="native-select"
28        data-size={local.size ?? "default"}
29        class="h-8 w-full min-w-0 appearance-none rounded-lg border border-input bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed"
30        {...others}
31      />
32      <IconChevronDown
33        class="top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground pointer-events-none absolute select-none"
34        aria-hidden="true"
35        data-slot="native-select-icon"
36      />
37    </div>
38  );
39};
40 
41const NativeSelectOption: Component<ComponentProps<"option">> = (props) => {
42  const [local, others] = splitProps(props, ["class"]);
43  return (
44    <option
45      data-slot="native-select-option"
46      class={cn("bg-[Canvas] text-[CanvasText]", local.class)}
47      {...others}
48    />
49  );
50};
51 
52const NativeSelectOptGroup: Component<ComponentProps<"optgroup">> = (props) => {
53  const [local, others] = splitProps(props, ["class"]);
54  return (
55    <optgroup
56      data-slot="native-select-optgroup"
57      class={cn("bg-[Canvas] text-[CanvasText]", local.class)}
58      {...others}
59    />
60  );
61};
62 
63// … truncated