laif-ds/dist/agent-docs/components/Select.md

Design System di Laif con componenti React basati su principi di Atomic Design

 # Select (Deprecated)
 
 ## Overview
 
 Single-selection dropdown built on Radix Select.
 
 - ⚠️ This component is deprecated. Prefer `AppSelect` for new code.
 
 ---
 
 ## Subcomponents & Props
 
 - **Select**: Root container with optional label
   - `size`: `"sm" | "default" | "lg"` (default `"default"`)
   - `label`: `string | React.ReactNode`
   - `className`, `labelClassName`
 - **SelectTrigger**: Button that opens the list
   - `size?`: optional override of context size
 - **SelectContent**: Floating list panel (Radix Content props)
 - **SelectGroup**: Group wrapper
 - **SelectItem**: Option row
 - **SelectLabel**: Group label
 - **SelectSeparator**: Separator line
 - **SelectValue**: Selected value placeholder/slot
 - **SelectScrollUpButton / SelectScrollDownButton**: Scroll affordances
 
 Root also exposes typical controlled props from Radix (`value`, `defaultValue`, `onValueChange`, `disabled`, `required`, `name`).
 
 ---
 
 ## Behavior
 
 - **Sizes**: `size` controls trigger height and font size.
 - **Keyboard**: Typeahead, arrow navigation, Enter/Space to select.
 - **Accessibility**: Labels via `Label` + `htmlFor`/`id`.
 
 ---
 
 ## Examples
 
 ### Interactive
 
 ```tsx
 import { useState } from "react";
 import { Label } from "laif-ds";
 import {
   Select,
   SelectTrigger,
   SelectValue,
   SelectContent,
   SelectGroup,
   SelectLabel,
   SelectItem,
   SelectSeparator,
 } from "laif-ds";
 
 export function InteractiveSelect() {
   const [value, setValue] = useState("");
   return (
     <div className="w-full max-w-sm space-y-6">
       <div className="space-y-2">
         <Label htmlFor="framework">Framework</Label>
         <Select value={value} onValueChange={setValue}>
           <SelectTrigger id="framework" className="w-full">
             <SelectValue placeholder="Seleziona un framework" />
           </SelectTrigger>
           <SelectContent>
             <SelectGroup>
               <SelectLabel>Frontend</SelectLabel>
               <SelectItem value="react">React</SelectItem>
               <SelectItem value="vue">Vue</SelectItem>
               <SelectItem value="angular">Angular</SelectItem>
             </SelectGroup>
             <SelectSeparator />
             <SelectGroup>
               <SelectLabel>Backend</SelectLabel>
               <SelectItem value="node">Node.js</SelectItem>
               <SelectItem value="django">Django</SelectItem>
             </SelectGroup>
           </SelectContent>
         </Select>
       </div>
     </div>
   );
 }
 ```
 
 ### Sizes
 
 ```tsx
 import {
   Select,
   SelectTrigger,
   SelectValue,
   SelectContent,
   SelectItem,
 } from "laif-ds";
 
 export function SelectSizes() {
   return (
     <div className="flex flex-col space-y-4">
       <Select>
         <SelectTrigger size="sm" className="w-[180px]">
           <SelectValue placeholder="Small" />
         </SelectTrigger>
         <SelectContent>
           <SelectItem value="1">Opzione 1</SelectItem>
           <SelectItem value="2">Opzione 2</SelectItem>
         </SelectContent>
       </Select>
 
       <Select>
         <SelectTrigger className="w-[180px]">
           <SelectValue placeholder="Default" />
         </SelectTrigger>
         <SelectContent>
           <SelectItem value="1">Opzione 1</SelectItem>
           <SelectItem value="2">Opzione 2</SelectItem>
         </SelectContent>
       </Select>
     </div>
   );
 }
 ```
 
 ---
 
 ## Notes
 
 - **Use AppSelect**: Prefer `AppSelect` for production features (search, multiselect, async, etc.).
 - **A11y**: Keep labels synchronized with triggers using `id` and `htmlFor`.