select

1"use client"
2 
3import * as React from "react"
4import { Select as SelectPrimitive } from "radix-ui"
5 
6import { cn } from "@/registry/radix-sera/lib/utils"
7import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"
8 
9function Select({
10  ...props
11}: React.ComponentProps<typeof SelectPrimitive.Root>) {
12  return <SelectPrimitive.Root data-slot="select" {...props} />
13}
14 
15function SelectGroup({
16  className,
17  ...props
18}: React.ComponentProps<typeof SelectPrimitive.Group>) {
19  return (
20    <SelectPrimitive.Group
21      data-slot="select-group"
22      className={cn("scroll-my-1.5 p-1.5", className)}
23      {...props}
24    />
25  )
26}
27 
28function SelectValue({
29  ...props
30}: React.ComponentProps<typeof SelectPrimitive.Value>) {
31  return <SelectPrimitive.Value data-slot="select-value" {...props} />
32}
33 
34function SelectTrigger({
35  className,
36  size = "default",
37  children,
38  ...props
39}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
40  size?: "sm" | "default"
41}) {
42  return (
43    <SelectPrimitive.Trigger
44      data-slot="select-trigger"
45      data-size={size}
46      className={cn(
47        "flex w-fit items-center justify-between gap-1.5 rounded-none border border-transparent border-b-input bg-transparent px-0 py-2 text-sm whitespace-nowrap transition-[color,border-color] outline-none focus-visible:border-b-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive data-placeholder:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-b-destructive/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
48        className
49      )}
50      {...props}
51    >
52      {children}
53      <SelectPrimitive.Icon asChild>
54        <IconPlaceholder
55          lucide="ChevronDownIcon"
56          tabler="IconSelector"
57          hugeicons="UnfoldMoreIcon"
58          phosphor="CaretDownIcon"
59          remixicon="RiArrowDownSLine"
60          className="pointer-events-none size-3.5 text-muted-foreground"
61        />
62      </SelectPrimitive.Icon>
63    </SelectPrimitive.Trigger>
64  )
65}
66 
67function SelectContent({
68  className,
69  children,
70  position = "item-aligned",
71  align = "center",
72  ...props
73}: React.ComponentProps<typeof SelectPrimitive.Content>) {
74  return (
75    <SelectPrimitive.Portal>
76      <SelectPrimitive.Content
77// … truncated