Select

import {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectTrigger,
SelectValue,
} from "@/components/xfork-ui/select"

<Select>
<SelectTrigger className="w-[180px]">
  <SelectValue placeholder="Select a fruit" />
</SelectTrigger>
<SelectContent>
  <SelectGroup>
    <SelectLabel>Fruits</SelectLabel>
    <SelectItem value="apple">Apple</SelectItem>
    <SelectItem value="banana">Banana</SelectItem>
    <SelectItem value="orange">Orange</SelectItem>
    <SelectItem value="grape">Grape</SelectItem>
  </SelectGroup>
</SelectContent>
</Select>

function SelectTrigger({
className,
children,
...props
}: React.ComponentProps<typeof SelectPrimitive.Trigger>) {
return (
  <SelectPrimitive.Trigger
    data-slot="select-trigger"
    className={cn(
      // Layout
      "flex w-full items-center justify-between",
      "*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2",
      "[&_svg]:shrink-0",
      // Base Styles
      "h-9 rounded-md px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none",
      "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
      
      // Rest of your classes...
      
      className
    )}
    {...props}
  >
    {children}
    <SelectPrimitive.Icon asChild>
      <ChevronsUpDownIcon className="size-5 stroke-muted-foreground group-has-data-disabled:stroke-zinc-600 sm:size-4 dark:stroke-zinc-400 forced-colors:stroke-[CanvasText]" />
    </SelectPrimitive.Icon>
  </SelectPrimitive.Trigger>
)
}