CoolFace
Apppublic

huggingface/ai-deadlines

sourceHugging Faceupdated 3d agoView on Hugging Face
781likes
select.tsx159 linesDownload Raw Back to ui
1import * as React from "react"2import * as SelectPrimitive from "@radix-ui/react-select"3import { Check, ChevronDown, ChevronUp } from "lucide-react"4 5import { cn } from "@/lib/utils"6 7const Select = SelectPrimitive.Root8 9const SelectGroup = SelectPrimitive.Group10 11const SelectValue = SelectPrimitive.Value12 13const SelectTrigger = React.forwardRef<14  React.ElementRef<typeof SelectPrimitive.Trigger>,15  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>16>(({ className, children, ...props }, ref) => (17  <SelectPrimitive.Trigger18    ref={ref}19    className={cn(20      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm 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 [&>span]:line-clamp-1",21      className22    )}23    {...props}24  >25    {children}26    <SelectPrimitive.Icon asChild>27      <ChevronDown className="h-4 w-4 opacity-50" />28    </SelectPrimitive.Icon>29  </SelectPrimitive.Trigger>30))31SelectTrigger.displayName = SelectPrimitive.Trigger.displayName32 33const SelectScrollUpButton = React.forwardRef<34  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,35  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>36>(({ className, ...props }, ref) => (37  <SelectPrimitive.ScrollUpButton38    ref={ref}39    className={cn(40      "flex cursor-default items-center justify-center py-1",41      className42    )}43    {...props}44  >45    <ChevronUp className="h-4 w-4" />46  </SelectPrimitive.ScrollUpButton>47))48SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName49 50const SelectScrollDownButton = React.forwardRef<51  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,52  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>53>(({ className, ...props }, ref) => (54  <SelectPrimitive.ScrollDownButton55    ref={ref}56    className={cn(57      "flex cursor-default items-center justify-center py-1",58      className59    )}60    {...props}61  >62    <ChevronDown className="h-4 w-4" />63  </SelectPrimitive.ScrollDownButton>64))65SelectScrollDownButton.displayName =66  SelectPrimitive.ScrollDownButton.displayName67 68const SelectContent = React.forwardRef<69  React.ElementRef<typeof SelectPrimitive.Content>,70  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>71>(({ className, children, position = "popper", ...props }, ref) => (72  <SelectPrimitive.Portal>73    <SelectPrimitive.Content74      ref={ref}75      className={cn(76        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",77        position === "popper" &&78          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",79        className80      )}81      position={position}82      {...props}83    >84      <SelectScrollUpButton />85      <SelectPrimitive.Viewport86        className={cn(87          "p-1",88          position === "popper" &&89            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"90        )}91      >92        {children}93      </SelectPrimitive.Viewport>94      <SelectScrollDownButton />95    </SelectPrimitive.Content>96  </SelectPrimitive.Portal>97))98SelectContent.displayName = SelectPrimitive.Content.displayName99 100const SelectLabel = React.forwardRef<101  React.ElementRef<typeof SelectPrimitive.Label>,102  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>103>(({ className, ...props }, ref) => (104  <SelectPrimitive.Label105    ref={ref}106    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}107    {...props}108  />109))110SelectLabel.displayName = SelectPrimitive.Label.displayName111 112const SelectItem = React.forwardRef<113  React.ElementRef<typeof SelectPrimitive.Item>,114  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>115>(({ className, children, ...props }, ref) => (116  <SelectPrimitive.Item117    ref={ref}118    className={cn(119      "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",120      className121    )}122    {...props}123  >124    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">125      <SelectPrimitive.ItemIndicator>126        <Check className="h-4 w-4" />127      </SelectPrimitive.ItemIndicator>128    </span>129 130    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>131  </SelectPrimitive.Item>132))133SelectItem.displayName = SelectPrimitive.Item.displayName134 135const SelectSeparator = React.forwardRef<136  React.ElementRef<typeof SelectPrimitive.Separator>,137  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>138>(({ className, ...props }, ref) => (139  <SelectPrimitive.Separator140    ref={ref}141    className={cn("-mx-1 my-1 h-px bg-muted", className)}142    {...props}143  />144))145SelectSeparator.displayName = SelectPrimitive.Separator.displayName146 147export {148  Select,149  SelectGroup,150  SelectValue,151  SelectTrigger,152  SelectContent,153  SelectLabel,154  SelectItem,155  SelectSeparator,156  SelectScrollUpButton,157  SelectScrollDownButton,158}159