Function SelectOption

components/select/select-option.tsx:47–87

({
  label,
  value,
  onSelect,
  checkboxes,
  isSelected,
  isFocused,
  endAdornment,
  startAdornment,
}: SelectOptionProps)

}

export function SelectOption({
  label,
  value,
  onSelect,
  checkboxes,
  isSelected,
  isFocused,
  endAdornment,
  startAdornment,
}: SelectOptionProps) {
  const id = useId();

  return (
    <li
      className={clsxMerge(selectOptionVariants({ isSelected, isFocused }))}
      role='option'
      tabIndex={-1}
      onClick={() => {
        onSelect?.(value);
      }}
      onKeyDown={handleKeyboardEvent('Enter', () => {
        onSelect?.(value);
      })}
      aria-selected={isSelected}
      aria-labelledby={label ? id : undefined}
    >
      <div className='flex w-full items-center justify-start gap-2'>
        {checkboxes && <Checkbox size='small' checked={isSelected} />}
        {startAdornment && (
          <span className='inline-flex size-[18px] items-center justify-center overflow-hidden'>{startAdornment}</span>
        )}
        {label && (
          <span id={id} className='truncate'>
            {label}
          </span>
        )}
      </div>
      {endAdornment && <span className='ml-3'>{endAdornment}</span>}
    </li>
  );
}

SelectOption.displayName = 'SelectOption';