// shadcn Select — native <select> styled with theme tokens.
// Drops Radix Select's custom menu in V1 for zero JS + native a11y;
// upgrade to Radix when you need search-within-options or rich
// option content.

import type { SelectHTMLAttributes, ReactNode } from 'react'
import { cn } from '../cn'

export const Select = ({ className, children, ...props }: SelectHTMLAttributes<HTMLSelectElement>): ReactNode => (
  <select
    data-slot="select"
    className={cn(
      'flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs',
      'transition-[color,box-shadow] outline-none cursor-pointer',
      'dark:bg-input/30',
      'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
      'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
      className,
    )}
    {...props}
  >
    {children}
  </select>
)