@adamosuiteservices/ui 2.11.14 → 2.11.16

package/docs/components/ui/label.md

@@ -1,359 +1,359 @@
-# Label
-
-Etiqueta accesible asociada con controles de formulario. Basado en Radix UI Label para accesibilidad mejorada.
-
-## Descripción
-
-El componente `Label` renderiza una etiqueta accesible asociada con controles de formulario.
-
-## Importación
-
-```typescript
-import { Label } from "@adamosuiteservices/ui/label";
-```
-
-## Anatomía
-
-```tsx
-<Label htmlFor="email">Email</Label>
-<Input id="email" type="email" />
-```
-
-**Componentes**: 1 (Label)
-
-## Props
-
-| Prop        | Tipo     | Descripción                                       |
-| ----------- | -------- | ------------------------------------------------- |
-| `htmlFor`   | `string` | ID del control asociado (conecta label con input) |
-| `className` | `string` | Clases CSS adicionales                            |
-| ...props    | -        | Todas las props de Radix UI Label                 |
-
-## Patrones de Uso
-
-### Básico con Input
-
-```tsx
-import { Input } from "@adamosuiteservices/ui/input";
-
-<div className="space-y-2">
-  <Label htmlFor="email">Email</Label>
-  <Input id="email" type="email" placeholder="Enter your email" />
-</div>;
-```
-
-### Con Checkbox
-
-```tsx
-import { Checkbox } from "@adamosuiteservices/ui/checkbox";
-
-<div className="flex items-center gap-2">
-  <Checkbox id="terms" />
-  <Label htmlFor="terms">Accept terms and conditions</Label>
-</div>
-
-<div className="flex items-center gap-2">
-
-  <Checkbox id="newsletter" />
-  <Label htmlFor="newsletter">Subscribe to our newsletter</Label>
-</div>
-```
-
-### Con Radio Group
-
-```tsx
-import { RadioGroup, RadioGroupItem } from "@adamosuiteservices/ui/radio-group";
-
-<div className="space-y-4">
-  <Label>Choose your preferred theme</Label>
-  <RadioGroup defaultValue="light" className="space-y-2">
-    <div className="flex items-center gap-2">
-      <RadioGroupItem value="light" id="light" />
-      <Label htmlFor="light">Light</Label>
-    </div>
-    <div className="flex items-center gap-2">
-      <RadioGroupItem value="dark" id="dark" />
-      <Label htmlFor="dark">Dark</Label>
-    </div>
-    <div className="flex items-center gap-2">
-      <RadioGroupItem value="system" id="system" />
-      <Label htmlFor="system">System</Label>
-    </div>
-  </RadioGroup>
-</div>;
-```
-
-### Con Switch
-
-```tsx
-import { Switch } from "@adamosuiteservices/ui/switch";
-
-<div className="flex items-center gap-2">
-  <Switch id="notifications" />
-  <Label htmlFor="notifications">Enable notifications</Label>
-</div>
-
-<div className="flex items-center gap-2">
-  <Switch id="analytics" />
-  <Label htmlFor="analytics">Allow analytics tracking</Label>
-</div>
-```
-
-### Con Iconos
-
-```tsx
-import { Icon } from "@adamosuiteservices/ui/icon";
-import { Input } from "@adamosuiteservices/ui/input";
-
-<div className="space-y-6">
-  <div className="space-y-2">
-    <Label htmlFor="username" className="flex items-center gap-2">
-      <Icon symbol="person" className="text-lg" />
-      Username
-    </Label>
-    <Input id="username" placeholder="Enter your username" />
-  </div>
-
-  <div className="space-y-2">
-    <Label htmlFor="email" className="flex items-center gap-2">
-      <Icon symbol="mail" className="text-lg" />
-      Email Address
-    </Label>
-    <Input id="email" type="email" placeholder="Enter your email" />
-  </div>
-
-  <div className="space-y-2">
-    <Label htmlFor="password" className="flex items-center gap-2">
-      <Icon symbol="lock" className="text-lg" />
-      Password
-    </Label>
-    <Input id="password" type="password" />
-  </div>
-
-  <div className="space-y-2">
-    <Label htmlFor="birthday" className="flex items-center gap-2">
-      <Icon symbol="calendar_month" className="text-lg" />
-      Date of Birth
-    </Label>
-    <Input id="birthday" type="date" />
-  </div>
-</div>;
-```
-
-### Con Textarea
-
-```tsx
-import { Textarea } from "@adamosuiteservices/ui/textarea";
-
-<div className="space-y-2">
-  <Label htmlFor="message">Message</Label>
-  <Textarea id="message" placeholder="Type your message here." />
-</div>
-
-<div className="space-y-2">
-  <Label htmlFor="feedback">Feedback</Label>
-  <Textarea
-    id="feedback"
-    placeholder="Please share your feedback..."
-    className="min-h-[100px]"
-  />
-</div>
-```
-
-### Con Select
-
-```tsx
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@adamosuiteservices/ui/select";
-
-<div className="space-y-2">
-  <Label htmlFor="country">Country</Label>
-  <Select>
-    <SelectTrigger id="country">
-      <SelectValue placeholder="Select a country" />
-    </SelectTrigger>
-    <SelectContent>
-      <SelectItem value="us">United States</SelectItem>
-      <SelectItem value="uk">United Kingdom</SelectItem>
-      <SelectItem value="ca">Canada</SelectItem>
-    </SelectContent>
-  </Select>
-</div>;
-```
-
-### Campos Requeridos
-
-```tsx
-import { Input } from "@adamosuiteservices/ui/input";
-
-<div className="space-y-2">
-  <Label htmlFor="required-email">
-    Email Address <span className="text-destructive">*</span>
-  </Label>
-  <Input id="required-email" type="email" placeholder="Enter your email" required />
-</div>
-
-<div className="space-y-2">
-  <Label htmlFor="required-name">
-    Full Name <span className="text-destructive">*</span>
-  </Label>
-  <Input id="required-name" placeholder="Enter your full name" required />
-</div>
-
-<div className="space-y-2">
-  <Label htmlFor="optional-phone">
-    Phone Number <span className="text-muted-foreground text-xs">(optional)</span>
-  </Label>
-  <Input id="optional-phone" type="tel" placeholder="Enter your phone number" />
-</div>
-```
-
-### Con Descripción
-
-```tsx
-import { Input } from "@adamosuiteservices/ui/input";
-
-<div className="space-y-2">
-  <Label htmlFor="username">Username</Label>
-  <Input id="username" placeholder="johndoe" />
-  <p className="text-sm text-muted-foreground">
-    This will be your public display name.
-  </p>
-</div>;
-```
-
-### En Formulario Completo
-
-```tsx
-import { Input } from "@adamosuiteservices/ui/input";
-import { Button } from "@adamosuiteservices/ui/button";
-import { Checkbox } from "@adamosuiteservices/ui/checkbox";
-
-<form className="space-y-6 max-w-md">
-  <div className="space-y-2">
-    <Label htmlFor="name">Name</Label>
-    <Input id="name" placeholder="John Doe" />
-  </div>
-
-  <div className="space-y-2">
-    <Label htmlFor="email">Email</Label>
-    <Input id="email" type="email" placeholder="john@example.com" />
-  </div>
-
-  <div className="space-y-2">
-    <Label htmlFor="password">Password</Label>
-    <Input id="password" type="password" />
-  </div>
-
-  <div className="flex items-center gap-2">
-    <Checkbox id="remember" />
-    <Label htmlFor="remember">Remember me</Label>
-  </div>
-
-  <Button type="submit" className="w-full">
-    Sign Up
-  </Button>
-</form>;
-```
-
-## Casos de Uso Comunes
-
-**Forms**: Etiquetas para inputs, selects, textareas  
-**Checkboxes**: Labels clickeables junto a checkboxes  
-**Radio groups**: Labels para cada opción de radio  
-**Switches**: Descripción de toggles  
-**Required fields**: Marcar campos obligatorios con asterisco  
-**Accessibility**: Asociación semántica label-input
-
-## Estilos Base
-
-- **Display**: `flex items-center gap-2`
-- **Font**: `text-sm font-medium`
-- **Line height**: `leading-none`
-- **Select**: `select-none` (no seleccionable)
-- **Peer disabled**: `peer-disabled:cursor-not-allowed peer-disabled:opacity-50`
-- **Group disabled**: `group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50`
-
-## Estados
-
-### Disabled via Peer
-
-Cuando el input asociado (`peer`) está disabled:
-
-```tsx
-<Input id="disabled" disabled className="peer" />
-<Label htmlFor="disabled">Disabled field</Label>
-```
-
-→ Label automáticamente `opacity-50` y `cursor-not-allowed`
-
-### Disabled via Group
-
-Cuando el contenedor tiene `data-disabled`:
-
-```tsx
-<div data-disabled="true">
-  <Label htmlFor="field">Field</Label>
-  <Input id="field" disabled />
-</div>
-```
-
-→ Label automáticamente `opacity-50` y `pointer-events-none`
-
-## Accesibilidad
-
-- ✅ **Radix UI**: Basado en primitiva de Radix UI con accesibilidad completa
-- ✅ **htmlFor**: Asocia label con control usando `htmlFor` e `id`
-- ✅ **Click target**: Todo el label es clickeable, hace focus al input
-- ✅ **Screen readers**: Anuncia label cuando input recibe focus
-- ✅ **Required**: Marca campos requeridos con asterisco visible
-- ✅ **Disabled**: Estado disabled automático via peer o group
-- ⚠️ **Description**: Usa `aria-describedby` para textos de ayuda
-
-## Notas de Implementación
-
-- **Radix UI**: Wrapper sobre `@radix-ui/react-label`
-- **Peer awareness**: Detecta input disabled via clase `peer`
-- **Group awareness**: Detecta container disabled via `data-disabled`
-- **Gap auto**: `gap-2` entre icono y texto si hay icono
-- **Clickeable**: Todo el label hace focus al control asociado
-- **Non-selectable**: `select-none` para evitar selección accidental
-- **Flex**: Display flex para alinear iconos fácilmente
-
-## htmlFor vs Wrapping
-
-```tsx
-{/* Recomendado: htmlFor */}
-<Label htmlFor="email">Email</Label>
-<Input id="email" />
-
-{/* No recomendado: wrapping */}
-<Label>
-  Email
-  <Input />
-</Label>
-```
-
-**Usa htmlFor**: Mejor separación, más flexible con layouts, funciona con todos los componentes.
-
-## Troubleshooting
-
-**Label no hace click**: Verifica que `htmlFor` e `id` coincidan exactamente  
-**Disabled no funciona**: Asegúrate de usar `peer` className en el input o `data-disabled` en container  
-**Gap no se ve**: Label tiene `gap-2` por defecto, verifica que haya múltiples children  
-**Icono desalineado**: Label tiene `items-center`, verifica que el icono tenga tamaño adecuado  
-**Required asterisco no se ve**: Usa `<span className="text-destructive">*</span>`  
-**Texto muy grande**: Label es `text-sm`, ajusta con className si necesario  
-**No seleccionable**: Label tiene `select-none`, normal behavior  
-**Peer disabled no aplica**: El input debe tener `className="peer"` además de `disabled`
-
-## Referencias
-
-- **Radix UI Label**: <https://www.radix-ui.com/primitives/docs/components/label>
-- **shadcn/ui Label**: <https://ui.shadcn.com/docs/components/label>
-- **WAI-ARIA Label**: <https://www.w3.org/WAI/ARIA/apg/patterns/label/>
+# Label
+
+Etiqueta accesible asociada con controles de formulario. Basado en Radix UI Label para accesibilidad mejorada.
+
+## Descripción
+
+El componente `Label` renderiza una etiqueta accesible asociada con controles de formulario.
+
+## Importación
+
+```typescript
+import { Label } from "@adamosuiteservices/ui/label";
+```
+
+## Anatomía
+
+```tsx
+<Label htmlFor="email">Email</Label>
+<Input id="email" type="email" />
+```
+
+**Componentes**: 1 (Label)
+
+## Props
+
+| Prop        | Tipo     | Descripción                                       |
+| ----------- | -------- | ------------------------------------------------- |
+| `htmlFor`   | `string` | ID del control asociado (conecta label con input) |
+| `className` | `string` | Clases CSS adicionales                            |
+| ...props    | -        | Todas las props de Radix UI Label                 |
+
+## Patrones de Uso
+
+### Básico con Input
+
+```tsx
+import { Input } from "@adamosuiteservices/ui/input";
+
+<div className="space-y-2">
+  <Label htmlFor="email">Email</Label>
+  <Input id="email" type="email" placeholder="Enter your email" />
+</div>;
+```
+
+### Con Checkbox
+
+```tsx
+import { Checkbox } from "@adamosuiteservices/ui/checkbox";
+
+<div className="flex items-center gap-2">
+  <Checkbox id="terms" />
+  <Label htmlFor="terms">Accept terms and conditions</Label>
+</div>
+
+<div className="flex items-center gap-2">
+
+  <Checkbox id="newsletter" />
+  <Label htmlFor="newsletter">Subscribe to our newsletter</Label>
+</div>
+```
+
+### Con Radio Group
+
+```tsx
+import { RadioGroup, RadioGroupItem } from "@adamosuiteservices/ui/radio-group";
+
+<div className="space-y-4">
+  <Label>Choose your preferred theme</Label>
+  <RadioGroup defaultValue="light" className="space-y-2">
+    <div className="flex items-center gap-2">
+      <RadioGroupItem value="light" id="light" />
+      <Label htmlFor="light">Light</Label>
+    </div>
+    <div className="flex items-center gap-2">
+      <RadioGroupItem value="dark" id="dark" />
+      <Label htmlFor="dark">Dark</Label>
+    </div>
+    <div className="flex items-center gap-2">
+      <RadioGroupItem value="system" id="system" />
+      <Label htmlFor="system">System</Label>
+    </div>
+  </RadioGroup>
+</div>;
+```
+
+### Con Switch
+
+```tsx
+import { Switch } from "@adamosuiteservices/ui/switch";
+
+<div className="flex items-center gap-2">
+  <Switch id="notifications" />
+  <Label htmlFor="notifications">Enable notifications</Label>
+</div>
+
+<div className="flex items-center gap-2">
+  <Switch id="analytics" />
+  <Label htmlFor="analytics">Allow analytics tracking</Label>
+</div>
+```
+
+### Con Iconos
+
+```tsx
+import { Icon } from "@adamosuiteservices/ui/icon";
+import { Input } from "@adamosuiteservices/ui/input";
+
+<div className="space-y-6">
+  <div className="space-y-2">
+    <Label htmlFor="username" className="flex items-center gap-2">
+      <Icon symbol="person" className="text-lg" />
+      Username
+    </Label>
+    <Input id="username" placeholder="Enter your username" />
+  </div>
+
+  <div className="space-y-2">
+    <Label htmlFor="email" className="flex items-center gap-2">
+      <Icon symbol="mail" className="text-lg" />
+      Email Address
+    </Label>
+    <Input id="email" type="email" placeholder="Enter your email" />
+  </div>
+
+  <div className="space-y-2">
+    <Label htmlFor="password" className="flex items-center gap-2">
+      <Icon symbol="lock" className="text-lg" />
+      Password
+    </Label>
+    <Input id="password" type="password" />
+  </div>
+
+  <div className="space-y-2">
+    <Label htmlFor="birthday" className="flex items-center gap-2">
+      <Icon symbol="calendar_month" className="text-lg" />
+      Date of Birth
+    </Label>
+    <Input id="birthday" type="date" />
+  </div>
+</div>;
+```
+
+### Con Textarea
+
+```tsx
+import { Textarea } from "@adamosuiteservices/ui/textarea";
+
+<div className="space-y-2">
+  <Label htmlFor="message">Message</Label>
+  <Textarea id="message" placeholder="Type your message here." />
+</div>
+
+<div className="space-y-2">
+  <Label htmlFor="feedback">Feedback</Label>
+  <Textarea
+    id="feedback"
+    placeholder="Please share your feedback..."
+    className="min-h-[100px]"
+  />
+</div>
+```
+
+### Con Select
+
+```tsx
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@adamosuiteservices/ui/select";
+
+<div className="space-y-2">
+  <Label htmlFor="country">Country</Label>
+  <Select>
+    <SelectTrigger id="country">
+      <SelectValue placeholder="Select a country" />
+    </SelectTrigger>
+    <SelectContent>
+      <SelectItem value="us">United States</SelectItem>
+      <SelectItem value="uk">United Kingdom</SelectItem>
+      <SelectItem value="ca">Canada</SelectItem>
+    </SelectContent>
+  </Select>
+</div>;
+```
+
+### Campos Requeridos
+
+```tsx
+import { Input } from "@adamosuiteservices/ui/input";
+
+<div className="space-y-2">
+  <Label htmlFor="required-email">
+    Email Address <span className="text-destructive">*</span>
+  </Label>
+  <Input id="required-email" type="email" placeholder="Enter your email" required />
+</div>
+
+<div className="space-y-2">
+  <Label htmlFor="required-name">
+    Full Name <span className="text-destructive">*</span>
+  </Label>
+  <Input id="required-name" placeholder="Enter your full name" required />
+</div>
+
+<div className="space-y-2">
+  <Label htmlFor="optional-phone">
+    Phone Number <span className="text-muted-foreground text-xs">(optional)</span>
+  </Label>
+  <Input id="optional-phone" type="tel" placeholder="Enter your phone number" />
+</div>
+```
+
+### Con Descripción
+
+```tsx
+import { Input } from "@adamosuiteservices/ui/input";
+
+<div className="space-y-2">
+  <Label htmlFor="username">Username</Label>
+  <Input id="username" placeholder="johndoe" />
+  <p className="text-sm text-muted-foreground">
+    This will be your public display name.
+  </p>
+</div>;
+```
+
+### En Formulario Completo
+
+```tsx
+import { Input } from "@adamosuiteservices/ui/input";
+import { Button } from "@adamosuiteservices/ui/button";
+import { Checkbox } from "@adamosuiteservices/ui/checkbox";
+
+<form className="space-y-6 max-w-md">
+  <div className="space-y-2">
+    <Label htmlFor="name">Name</Label>
+    <Input id="name" placeholder="John Doe" />
+  </div>
+
+  <div className="space-y-2">
+    <Label htmlFor="email">Email</Label>
+    <Input id="email" type="email" placeholder="john@example.com" />
+  </div>
+
+  <div className="space-y-2">
+    <Label htmlFor="password">Password</Label>
+    <Input id="password" type="password" />
+  </div>
+
+  <div className="flex items-center gap-2">
+    <Checkbox id="remember" />
+    <Label htmlFor="remember">Remember me</Label>
+  </div>
+
+  <Button type="submit" className="w-full">
+    Sign Up
+  </Button>
+</form>;
+```
+
+## Casos de Uso Comunes
+
+**Forms**: Etiquetas para inputs, selects, textareas  
+**Checkboxes**: Labels clickeables junto a checkboxes  
+**Radio groups**: Labels para cada opción de radio  
+**Switches**: Descripción de toggles  
+**Required fields**: Marcar campos obligatorios con asterisco  
+**Accessibility**: Asociación semántica label-input
+
+## Estilos Base
+
+- **Display**: `flex items-center gap-2`
+- **Font**: `text-sm font-medium`
+- **Line height**: `leading-none`
+- **Select**: `select-none` (no seleccionable)
+- **Peer disabled**: `peer-disabled:cursor-not-allowed peer-disabled:opacity-50`
+- **Group disabled**: `group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50`
+
+## Estados
+
+### Disabled via Peer
+
+Cuando el input asociado (`peer`) está disabled:
+
+```tsx
+<Input id="disabled" disabled className="peer" />
+<Label htmlFor="disabled">Disabled field</Label>
+```
+
+→ Label automáticamente `opacity-50` y `cursor-not-allowed`
+
+### Disabled via Group
+
+Cuando el contenedor tiene `data-disabled`:
+
+```tsx
+<div data-disabled="true">
+  <Label htmlFor="field">Field</Label>
+  <Input id="field" disabled />
+</div>
+```
+
+→ Label automáticamente `opacity-50` y `pointer-events-none`
+
+## Accesibilidad
+
+- ✅ **Radix UI**: Basado en primitiva de Radix UI con accesibilidad completa
+- ✅ **htmlFor**: Asocia label con control usando `htmlFor` e `id`
+- ✅ **Click target**: Todo el label es clickeable, hace focus al input
+- ✅ **Screen readers**: Anuncia label cuando input recibe focus
+- ✅ **Required**: Marca campos requeridos con asterisco visible
+- ✅ **Disabled**: Estado disabled automático via peer o group
+- ⚠️ **Description**: Usa `aria-describedby` para textos de ayuda
+
+## Notas de Implementación
+
+- **Radix UI**: Wrapper sobre `@radix-ui/react-label`
+- **Peer awareness**: Detecta input disabled via clase `peer`
+- **Group awareness**: Detecta container disabled via `data-disabled`
+- **Gap auto**: `gap-2` entre icono y texto si hay icono
+- **Clickeable**: Todo el label hace focus al control asociado
+- **Non-selectable**: `select-none` para evitar selección accidental
+- **Flex**: Display flex para alinear iconos fácilmente
+
+## htmlFor vs Wrapping
+
+```tsx
+{/* Recomendado: htmlFor */}
+<Label htmlFor="email">Email</Label>
+<Input id="email" />
+
+{/* No recomendado: wrapping */}
+<Label>
+  Email
+  <Input />
+</Label>
+```
+
+**Usa htmlFor**: Mejor separación, más flexible con layouts, funciona con todos los componentes.
+
+## Troubleshooting
+
+**Label no hace click**: Verifica que `htmlFor` e `id` coincidan exactamente  
+**Disabled no funciona**: Asegúrate de usar `peer` className en el input o `data-disabled` en container  
+**Gap no se ve**: Label tiene `gap-2` por defecto, verifica que haya múltiples children  
+**Icono desalineado**: Label tiene `items-center`, verifica que el icono tenga tamaño adecuado  
+**Required asterisco no se ve**: Usa `<span className="text-destructive">*</span>`  
+**Texto muy grande**: Label es `text-sm`, ajusta con className si necesario  
+**No seleccionable**: Label tiene `select-none`, normal behavior  
+**Peer disabled no aplica**: El input debe tener `className="peer"` además de `disabled`
+
+## Referencias
+
+- **Radix UI Label**: <https://www.radix-ui.com/primitives/docs/components/label>
+- **shadcn/ui Label**: <https://ui.shadcn.com/docs/components/label>
+- **WAI-ARIA Label**: <https://www.w3.org/WAI/ARIA/apg/patterns/label/>