Select

1"use client";
2 
3import { Icon } from "@/lib/icon";
4import { mdiCheck, mdiChevronDown, mdiChevronUp } from "@mdi/js";
5import { Select as SelectPrimitive } from "radix-ui";
6import type * as React from "react";
7 
8import { cn } from "@/lib/utils";
9 
10function Select({
11  ...props
12}: React.ComponentProps<typeof SelectPrimitive.Root>) {
13  return <SelectPrimitive.Root data-slot="select" {...props} />;
14}
15 
16function SelectGroup({
17  ...props
18}: React.ComponentProps<typeof SelectPrimitive.Group>) {
19  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
20}
21 
22function SelectValue({
23  ...props
24}: React.ComponentProps<typeof SelectPrimitive.Value>) {
25  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
26}
27 
28function SelectTrigger({
29  className,
30  size = "default",
31  children,
32  ...props
33}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
34  size?: "sm" | "default";
35}) {
36  return (
37    <SelectPrimitive.Trigger
38      data-slot="select-trigger"
39      data-size={size}
40      className={cn(
41        "border-input data-[state=open]:border-primary text-md text-neutral-fg data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground font-semibold focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive bg-body-bg dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border-1 px-3 py-2 whitespace-nowrap transition-[color] outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-10 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 data-[state=open]:border-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
42        className,
43      )}
44      {...props}
45    >
46      {children}
47      <SelectPrimitive.Icon asChild>
48        <Icon path={mdiChevronDown} size={1.3} className="opacity-50" />
49      </SelectPrimitive.Icon>
50    </SelectPrimitive.Trigger>
51  );
52}
53 
54function SelectContent({
55  className,
56  children,
57  position = "popper",
58  ...props
59}: React.ComponentProps<typeof SelectPrimitive.Content>) {
60  return (
61    <SelectPrimitive.Portal>
62      <SelectPrimitive.Content
63        data-slot="select-content"
64        className={cn(
65// … truncated