mirror of
https://github.com/codeaashu/claude-code.git
synced 2026-04-08 22:28:48 +03:00
claude-code
This commit is contained in:
161
web/components/ui/select.tsx
Normal file
161
web/components/ui/select.tsx
Normal file
@@ -0,0 +1,161 @@
|
||||
'use client'
|
||||
|
||||
import * as React from 'react'
|
||||
import * as RadixSelect from '@radix-ui/react-select'
|
||||
import { Check, ChevronDown, ChevronUp } from 'lucide-react'
|
||||
import { cn } from '@/lib/utils'
|
||||
|
||||
const Select = RadixSelect.Root
|
||||
const SelectGroup = RadixSelect.Group
|
||||
const SelectValue = RadixSelect.Value
|
||||
|
||||
const SelectTrigger = React.forwardRef<
|
||||
React.ElementRef<typeof RadixSelect.Trigger>,
|
||||
React.ComponentPropsWithoutRef<typeof RadixSelect.Trigger>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<RadixSelect.Trigger
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'flex h-9 w-full items-center justify-between rounded-md border border-surface-700',
|
||||
'bg-surface-900 px-3 py-2 text-sm text-surface-100',
|
||||
'placeholder:text-surface-500',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:border-transparent',
|
||||
'disabled:cursor-not-allowed disabled:opacity-50',
|
||||
'[&>span]:line-clamp-1',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<RadixSelect.Icon asChild>
|
||||
<ChevronDown className="h-4 w-4 text-surface-500 flex-shrink-0" aria-hidden="true" />
|
||||
</RadixSelect.Icon>
|
||||
</RadixSelect.Trigger>
|
||||
))
|
||||
SelectTrigger.displayName = RadixSelect.Trigger.displayName
|
||||
|
||||
const SelectScrollUpButton = React.forwardRef<
|
||||
React.ElementRef<typeof RadixSelect.ScrollUpButton>,
|
||||
React.ComponentPropsWithoutRef<typeof RadixSelect.ScrollUpButton>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<RadixSelect.ScrollUpButton
|
||||
ref={ref}
|
||||
className={cn('flex cursor-default items-center justify-center py-1', className)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronUp className="h-4 w-4 text-surface-500" aria-hidden="true" />
|
||||
</RadixSelect.ScrollUpButton>
|
||||
))
|
||||
SelectScrollUpButton.displayName = RadixSelect.ScrollUpButton.displayName
|
||||
|
||||
const SelectScrollDownButton = React.forwardRef<
|
||||
React.ElementRef<typeof RadixSelect.ScrollDownButton>,
|
||||
React.ComponentPropsWithoutRef<typeof RadixSelect.ScrollDownButton>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<RadixSelect.ScrollDownButton
|
||||
ref={ref}
|
||||
className={cn('flex cursor-default items-center justify-center py-1', className)}
|
||||
{...props}
|
||||
>
|
||||
<ChevronDown className="h-4 w-4 text-surface-500" aria-hidden="true" />
|
||||
</RadixSelect.ScrollDownButton>
|
||||
))
|
||||
SelectScrollDownButton.displayName = RadixSelect.ScrollDownButton.displayName
|
||||
|
||||
const SelectContent = React.forwardRef<
|
||||
React.ElementRef<typeof RadixSelect.Content>,
|
||||
React.ComponentPropsWithoutRef<typeof RadixSelect.Content>
|
||||
>(({ className, children, position = 'popper', ...props }, ref) => (
|
||||
<RadixSelect.Portal>
|
||||
<RadixSelect.Content
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-surface-700',
|
||||
'bg-surface-850 text-surface-100 shadow-lg',
|
||||
'data-[state=open]:animate-scale-in data-[state=closed]:animate-scale-out',
|
||||
position === 'popper' && [
|
||||
'data-[side=bottom]:translate-y-1',
|
||||
'data-[side=top]:-translate-y-1',
|
||||
],
|
||||
className
|
||||
)}
|
||||
position={position}
|
||||
{...props}
|
||||
>
|
||||
<SelectScrollUpButton />
|
||||
<RadixSelect.Viewport
|
||||
className={cn(
|
||||
'p-1',
|
||||
position === 'popper' &&
|
||||
'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</RadixSelect.Viewport>
|
||||
<SelectScrollDownButton />
|
||||
</RadixSelect.Content>
|
||||
</RadixSelect.Portal>
|
||||
))
|
||||
SelectContent.displayName = RadixSelect.Content.displayName
|
||||
|
||||
const SelectLabel = React.forwardRef<
|
||||
React.ElementRef<typeof RadixSelect.Label>,
|
||||
React.ComponentPropsWithoutRef<typeof RadixSelect.Label>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<RadixSelect.Label
|
||||
ref={ref}
|
||||
className={cn('px-2 py-1.5 text-xs font-semibold text-surface-500 uppercase tracking-wider', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SelectLabel.displayName = RadixSelect.Label.displayName
|
||||
|
||||
const SelectItem = React.forwardRef<
|
||||
React.ElementRef<typeof RadixSelect.Item>,
|
||||
React.ComponentPropsWithoutRef<typeof RadixSelect.Item>
|
||||
>(({ className, children, ...props }, ref) => (
|
||||
<RadixSelect.Item
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm',
|
||||
'text-surface-200 outline-none',
|
||||
'focus:bg-surface-800 focus:text-surface-50',
|
||||
'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<RadixSelect.ItemIndicator>
|
||||
<Check className="h-4 w-4 text-brand-400" aria-hidden="true" />
|
||||
</RadixSelect.ItemIndicator>
|
||||
</span>
|
||||
<RadixSelect.ItemText>{children}</RadixSelect.ItemText>
|
||||
</RadixSelect.Item>
|
||||
))
|
||||
SelectItem.displayName = RadixSelect.Item.displayName
|
||||
|
||||
const SelectSeparator = React.forwardRef<
|
||||
React.ElementRef<typeof RadixSelect.Separator>,
|
||||
React.ComponentPropsWithoutRef<typeof RadixSelect.Separator>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<RadixSelect.Separator
|
||||
ref={ref}
|
||||
className={cn('-mx-1 my-1 h-px bg-surface-700', className)}
|
||||
{...props}
|
||||
/>
|
||||
))
|
||||
SelectSeparator.displayName = RadixSelect.Separator.displayName
|
||||
|
||||
export {
|
||||
Select,
|
||||
SelectGroup,
|
||||
SelectValue,
|
||||
SelectTrigger,
|
||||
SelectContent,
|
||||
SelectLabel,
|
||||
SelectItem,
|
||||
SelectSeparator,
|
||||
SelectScrollUpButton,
|
||||
SelectScrollDownButton,
|
||||
}
|
||||
Reference in New Issue
Block a user