Lesser abstract reka-ui SelectItemText

[WheelerCC]

🔗 Linked issue

Not an issue

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Without the ability to add classes to SelectItemText, I was unable to implement something like the screenshot below without w-full being defined on SelectItemText. I don't suggest that a breaking change like what I've included in this MR is the best approach, it means that

<Select>
  <SelectTrigger class="w-[180px]">
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SelectItem value="apple">
        Apple
      </SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

would become

<Select>
  <SelectTrigger class="w-[180px]">
    <SelectValue placeholder="Select a fruit" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>Fruits</SelectLabel>
      <SelectItem value="apple">
        <SelectItemText>
          Apple
        <SelectItemText />
      </SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

Which may be less like shadcn and therefore less desirable. Perhaps a way to pass css to the text at least?

📸 Screenshots (if appropriate)

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[WheelerCC]

Example of what I couldn't achieve without this. Again, a very valid conclusion is to close this MR as denied, and the user should instead adjust their components as required. I suppose it's just a question of what you want the interface to be.

<SelectContent>
  <SelectGroup>
    <SelectItem
      v-for="(coordinate, coordinateIndex) in Array(9).keys()"
      :value="coordinateIndex"
      :key="coordinateIndex"
    >
      <SelectItemText class="w-full">    <------ required w-full, no way to pass when locked inside SelectItem
        <div class="flex flex-row w-full">
          <div>{{ `WCS ${coordinate + 1}` }}</div>
          <Kbd class="ml-auto">{{ getWCSCommand(coordinate) }}</Kbd>
        </div>
      </SelectItemText>
    </SelectItem>
  </SelectGroup>
</SelectContent>