feat: add Select component

[BIA3IA]

Closes #15

[coderabbitai]

Walkthrough

Added @radix-ui/react-select dependency and created a new wrapper component file that exports 10 Radix UI Select-related components (Select, SelectTrigger, SelectContent, SelectItem, SelectLabel, etc.) with consistent styling and theme composition.

Changes

Cohort / File(s)	Summary
Dependencies package.json	Added @radix-ui/react-select v2.2.6 to dependencies for Select component support.
UI Component Implementation src/components/ui/select.tsx	New fully-typed wrapper exposing 10 Select sub-components (Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectLabel, SelectItem, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton) with theme-driven styling, portal-based rendering, and scroll button support.

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat: add Select component' clearly summarizes the main change—adding a new Select component to the codebase.
Linked Issues check	✅ Passed	The pull request adds a Select component as indicated by the linked issue #15, meeting the primary objective of implementing this UI component.
Out of Scope Changes check	✅ Passed	All changes are scoped to Select component implementation: adding the dependency and creating the wrapper component file with exports.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/components/ui/select.tsx`:
- Around line 115-133: SelectItem currently renders SelectPrimitive.ItemText but
omits a selected-item marker; update the SelectItem component to include
<SelectPrimitive.ItemIndicator> (rendering your check/icon element) alongside
the ItemText so selected options show a visual indicator; place the
ItemIndicator before the ItemText, ensure it uses existing CSS classes or add a
small utility class for spacing/alignment (matching the "relative flex ...
items-center gap-1.5" container), and keep all existing props and children
handling in SelectItem.

🧹 Nitpick comments (1)

src/components/ui/select.tsx (1)

91-91: Non-English comment.

The inline comment is in Italian. For consistency and broader team accessibility, consider switching to English.

-            // il menu matcha la larghezza del trigger
+            // match the dropdown width to the trigger width

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

No selected-item indicator — intentional?

SelectItem wraps children in ItemText but never renders SelectPrimitive.ItemIndicator. Without it, users have no visual cue for which option is currently selected when the dropdown is open. Most Radix Select implementations include a check icon via ItemIndicator.

If this is a deliberate design decision, ignore this. Otherwise:

Proposed fix

+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
-import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"

 function SelectItem({ className, children, ...props }: React.ComponentProps<typeof SelectPrimitive.Item>) {
   return (
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "relative flex w-full select-none cursor-pointer items-center gap-1.5",
+        "relative flex w-full select-none cursor-pointer items-center gap-1.5 pl-8",
         "rounded-buttonsM px-5 py-2.5",
         "typo-body-medium text-text-primary",
         "outline-none",
         "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
         "data-[highlighted]:bg-blue-tertiary/10",
         className
       )}
       {...props}
     >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="h-4 w-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
       <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
     </SelectPrimitive.Item>
   )
 }

🤖 Prompt for AI Agents

In `@src/components/ui/select.tsx` around lines 115 - 133, SelectItem currently
renders SelectPrimitive.ItemText but omits a selected-item marker; update the
SelectItem component to include <SelectPrimitive.ItemIndicator> (rendering your
check/icon element) alongside the ItemText so selected options show a visual
indicator; place the ItemIndicator before the ItemText, ensure it uses existing
CSS classes or add a small utility class for spacing/alignment (matching the
"relative flex ... items-center gap-1.5" container), and keep all existing props
and children handling in SelectItem.