spb/fetcha

1"use client";2import * as React from "react";3import * as SelectPrimitive from "@radix-ui/react-select";4import { Check, ChevronDown } from "lucide-react";5import { cn } from "@/lib/utils";67export const Select = SelectPrimitive.Root;8export const SelectGroup = SelectPrimitive.Group;9export const SelectValue = SelectPrimitive.Value;1011export const SelectTrigger = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Trigger>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>>(({ className, children, ...props }, ref) => (12  <SelectPrimitive.Trigger13    ref={ref}14    className={cn(15      "flex h-9 w-full items-center justify-between gap-2 rounded-md border border-border bg-bg px-3 py-1 text-sm shadow-xs transition-colors hover:border-border-strong focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/25 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-fg-subtle [&>span]:truncate",16      className,17    )}18    {...props}19  >20    {children}21    <SelectPrimitive.Icon asChild>22      <ChevronDown className="size-4 shrink-0 text-fg-subtle" />23    </SelectPrimitive.Icon>24  </SelectPrimitive.Trigger>25));26SelectTrigger.displayName = "SelectTrigger";2728export const SelectContent = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Content>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>>(({ className, children, position = "popper", ...props }, ref) => (29  <SelectPrimitive.Portal>30    <SelectPrimitive.Content31      ref={ref}32      position={position}33      className={cn(34        "relative z-50 max-h-80 min-w-[8rem] overflow-hidden rounded-md border border-border bg-bg-elevated text-fg shadow-md data-[state=open]:animate-fade-in",35        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1 w-full min-w-[var(--radix-select-trigger-width)]",36        className,37      )}38      {...props}39    >40      <SelectPrimitive.Viewport className="p-1">{children}</SelectPrimitive.Viewport>41    </SelectPrimitive.Content>42  </SelectPrimitive.Portal>43));44SelectContent.displayName = "SelectContent";4546export const SelectLabel = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Label>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>>(({ className, ...props }, ref) => (47  <SelectPrimitive.Label ref={ref} className={cn("px-2 py-1.5 text-[11px] font-medium uppercase tracking-wide text-fg-subtle", className)} {...props} />48));49SelectLabel.displayName = "SelectLabel";5051export const SelectItem = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Item>, React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>>(({ className, children, ...props }, ref) => (52  <SelectPrimitive.Item53    ref={ref}54    className={cn("relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className)}55    {...props}56  >57    <span className="absolute right-2 flex size-3.5 items-center justify-center">58      <SelectPrimitive.ItemIndicator>59        <Check className="size-3.5" />60      </SelectPrimitive.ItemIndicator>61    </span>62    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>63  </SelectPrimitive.Item>64));65SelectItem.displayName = "SelectItem";66