Select

1"use client";
2 
3import * as React from "react";
4import { Check, ChevronDown, ChevronUp } from "lucide-react";
5import * as SelectPrimitive from "@radix-ui/react-select";
6 
7import { cn } from "@/lib/utils";
8import {
9  fieldVariants,
10  floatingItemVariants,
11  floatingMotion,
12  floatingSurfaceVariants,
13  type FloatingItemProps,
14  type FloatingSurfaceProps,
15} from "@/components/ui/recipes";
16 
17const Select = SelectPrimitive.Root;
18 
19const SelectGroup = SelectPrimitive.Group;
20 
21const SelectValue = SelectPrimitive.Value;
22 
23const SelectTrigger = React.forwardRef<
24  React.ElementRef<typeof SelectPrimitive.Trigger>,
25  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> & {
26    variant?: "default" | "soft" | "glass";
27    radius?: "none" | "sm" | "md" | "lg" | "xl" | "full";
28    size?: "sm" | "md" | "lg";
29  }
30>(({ className, children, variant, radius, size = "md", ...props }, ref) => (
31  <SelectPrimitive.Trigger
32    ref={ref}
33    className={cn(
34      fieldVariants({ variant, radius }),
35      "group items-center justify-between gap-2 [&>span]:line-clamp-1",
36      size === "sm" && "h-8 px-2.5 py-1 text-xs",
37      size === "md" && "h-9 px-3 py-1.5 text-sm",
38      size === "lg" && "h-11 px-3.5 py-2 text-sm",
39      className,
40    )}
41    {...props}
42  >
43    {children}
44    <SelectPrimitive.Icon asChild>
45      <ChevronDown className="h-4 w-4 opacity-50 transition-transform duration-[var(--poyraz-motion-duration-base)] ease-[var(--poyraz-motion-ease-out)] group-data-[state=open]:rotate-180 group-data-[state=open]:scale-110" />
46    </SelectPrimitive.Icon>
47  </SelectPrimitive.Trigger>
48));
49SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
50 
51const SelectScrollUpButton = React.forwardRef<
52  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
53  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
54>(({ className, ...props }, ref) => (
55  <SelectPrimitive.ScrollUpButton
56    ref={ref}
57    className={cn("flex cursor-default items-center justify-center py-1", className)}
58    {...props}
59  >
60    <ChevronUp className="h-4 w-4" />
61  </SelectPrimitive.ScrollUpButton>
62));
63SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
64 
65const SelectScrollDownButton = React.forwardRef<
66  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
67  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
68>(({ className, ...props }, ref) => (
69  <SelectPrimitive.ScrollDownButton
70    ref={ref}
71// … truncated