Team Ai
Apppublic

Staticmaple/NEWBING

sourceHugging Facemitupdated 3y agoView on Hugging Face
0likes
select.tsx124 linesDownload Raw Back to ui
1'use client'2 3import * as React from 'react'4import * as SelectPrimitive from '@radix-ui/react-select'5 6import { cn } from '@/lib/utils'7import {8  IconArrowDown,9  IconCheck,10  IconChevronUpDown11} from '@/components/ui/icons'12 13const Select = SelectPrimitive.Root14 15const SelectGroup = SelectPrimitive.Group16 17const SelectValue = SelectPrimitive.Value18 19const SelectTrigger = React.forwardRef<20  React.ElementRef<typeof SelectPrimitive.Trigger>,21  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>22>(({ className, children, ...props }, ref) => (23  <SelectPrimitive.Trigger24    ref={ref}25    className={cn(26      'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',27      className28    )}29    {...props}30  >31    {children}32    <SelectPrimitive.Icon asChild>33      <IconChevronUpDown className="opacity-50" />34    </SelectPrimitive.Icon>35  </SelectPrimitive.Trigger>36))37SelectTrigger.displayName = SelectPrimitive.Trigger.displayName38 39const SelectContent = React.forwardRef<40  React.ElementRef<typeof SelectPrimitive.Content>,41  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>42>(({ className, children, position = 'popper', ...props }, ref) => (43  <SelectPrimitive.Portal>44    <SelectPrimitive.Content45      ref={ref}46      className={cn(47        'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-80',48        position === 'popper' && 'translate-y-1',49        className50      )}51      position={position}52      {...props}53    >54      <SelectPrimitive.Viewport55        className={cn(56          'p-1',57          position === 'popper' &&58            'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'59        )}60      >61        {children}62      </SelectPrimitive.Viewport>63    </SelectPrimitive.Content>64  </SelectPrimitive.Portal>65))66SelectContent.displayName = SelectPrimitive.Content.displayName67 68const SelectLabel = React.forwardRef<69  React.ElementRef<typeof SelectPrimitive.Label>,70  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>71>(({ className, ...props }, ref) => (72  <SelectPrimitive.Label73    ref={ref}74    className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}75    {...props}76  />77))78SelectLabel.displayName = SelectPrimitive.Label.displayName79 80const SelectItem = React.forwardRef<81  React.ElementRef<typeof SelectPrimitive.Item>,82  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>83>(({ className, children, ...props }, ref) => (84  <SelectPrimitive.Item85    ref={ref}86    className={cn(87      'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',88      className89    )}90    {...props}91  >92    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">93      <SelectPrimitive.ItemIndicator>94        <IconCheck className="h-4 w-4" />95      </SelectPrimitive.ItemIndicator>96    </span>97    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>98  </SelectPrimitive.Item>99))100SelectItem.displayName = SelectPrimitive.Item.displayName101 102const SelectSeparator = React.forwardRef<103  React.ElementRef<typeof SelectPrimitive.Separator>,104  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>105>(({ className, ...props }, ref) => (106  <SelectPrimitive.Separator107    ref={ref}108    className={cn('-mx-1 my-1 h-px bg-muted', className)}109    {...props}110  />111))112SelectSeparator.displayName = SelectPrimitive.Separator.displayName113 114export {115  Select,116  SelectGroup,117  SelectValue,118  SelectTrigger,119  SelectContent,120  SelectLabel,121  SelectItem,122  SelectSeparator123}124