@adamosuiteservices/ui 2.13.4 → 2.14.0

package/docs/components/ui/textarea.md

@@ -1,243 +1,243 @@
-# Textarea
-
-Campo de texto multilínea con auto-resize. Wrapper nativo de `<textarea>` HTML.
-
-## Descripción
-
-El componente `Textarea` proporciona un campo de entrada de texto multilínea.
-
-## Importación
-
-```typescript
-import { Textarea } from "@adamosuiteservices/ui/textarea";
-```
-
-## Anatomía
-
-```tsx
-<Textarea placeholder="Type your message here." />
-```
-
-**Componentes**: 1 (Textarea)
-
-## Props
-
-| Prop           | Tipo                       | Descripción                  |
-| -------------- | -------------------------- | ---------------------------- |
-| `placeholder`  | `string`                   | Texto placeholder            |
-| `value`        | `string`                   | Valor controlado             |
-| `defaultValue` | `string`                   | Valor inicial (uncontrolled) |
-| `onChange`     | `(e: ChangeEvent) => void` | Callback al cambiar          |
-| `disabled`     | `boolean`                  | Deshabilita el textarea      |
-| `readOnly`     | `boolean`                  | Solo lectura                 |
-| `required`     | `boolean`                  | Campo requerido              |
-| `rows`         | `number`                   | Número de filas              |
-| `maxLength`    | `number`                   | Longitud máxima              |
-| `className`    | `string`                   | Clases CSS adicionales       |
-
-**Nota**: Acepta todas las props HTML de `<textarea>`
-
-## Patrones de Uso
-
-### Básico
-
-```tsx
-import { Textarea } from "@adamosuiteservices/ui/textarea";
-
-<Textarea placeholder="Type your message here." />;
-```
-
-### Con Label
-
-```tsx
-import { Label } from "@adamosuiteservices/ui/label";
-
-<div className="grid w-full gap-2">
-  <Label htmlFor="message">Your message</Label>
-  <Textarea placeholder="Type your message here." id="message" />
-</div>;
-```
-
-### Controlado con Contador
-
-```tsx
-import { useState } from "react";
-
-function App() {
-  const [value, setValue] = useState("");
-
-  return (
-    <div className="grid w-full gap-2">
-      <Label htmlFor="feedback">
-        Your feedback ({value.length}/500 characters)
-      </Label>
-      <Textarea
-        id="feedback"
-        placeholder="Share your thoughts..."
-        value={value}
-        onChange={(e) => setValue(e.target.value)}
-        maxLength={500}
-      />
-      <div className="flex justify-between text-sm text-muted-foreground">
-        <span>{value.length} characters</span>
-        <span>{500 - value.length} remaining</span>
-      </div>
-    </div>
-  );
-}
-```
-
-### Con Validación
-
-```tsx
-import { Button } from "@adamosuiteservices/ui/button";
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@adamosuiteservices/ui/card";
-
-function CommentForm() {
-  const [comment, setComment] = useState("");
-  const [error, setError] = useState("");
-
-  const handleSubmit = () => {
-    if (comment.trim().length < 10) {
-      setError("Comment must be at least 10 characters long");
-      return;
-    }
-    setError("");
-    // Submit logic
-  };
-
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>Leave a Comment</CardTitle>
-      </CardHeader>
-      <CardContent className="space-y-2">
-        <Textarea
-          placeholder="What did you think?"
-          value={comment}
-          onChange={(e) => {
-            setComment(e.target.value);
-            if (error) setError("");
-          }}
-          aria-invalid={!!error}
-          rows={4}
-        />
-        {error && <p className="text-destructive text-sm">{error}</p>}
-      </CardContent>
-      <CardFooter>
-        <Button onClick={handleSubmit}>Submit Comment</Button>
-      </CardFooter>
-    </Card>
-  );
-}
-```
-
-### Chat Input con Enter
-
-```tsx
-function ChatInput() {
-  const [message, setMessage] = useState("");
-
-  const handleSend = () => {
-    if (message.trim()) {
-      // Send message logic
-      setMessage("");
-    }
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === "Enter" && !e.shiftKey) {
-      e.preventDefault();
-      handleSend();
-    }
-  };
-
-  return (
-    <div className="relative">
-      <Textarea
-        placeholder="Type a message... (Enter to send, Shift+Enter for new line)"
-        value={message}
-        onChange={(e) => setMessage(e.target.value)}
-        onKeyDown={handleKeyDown}
-        rows={3}
-        className="pr-12 resize-none"
-      />
-      <Button
-        size="sm"
-        className="absolute bottom-2 right-2"
-        onClick={handleSend}
-      >
-        Send
-      </Button>
-    </div>
-  );
-}
-```
-
-### Resize Options
-
-```tsx
-// Auto-resize (default con field-sizing-content)
-<Textarea placeholder="Auto-resize..." className="min-h-[80px] resize-none" />
-
-// Manual resize (ambas direcciones)
-<Textarea placeholder="Drag corner to resize..." className="min-h-[80px] resize-both" />
-
-// Vertical resize only
-<Textarea placeholder="Resize vertically..." className="min-h-[80px] resize-y" />
-
-// No resize
-<Textarea placeholder="Fixed size..." rows={4} className="resize-none" />
-```
-
-## Casos de Uso
-
-**Comentarios**: Feedback, reviews, mensajes  
-**Formularios**: Descripción, bio, notas  
-**Chat**: Mensajes multilínea  
-**Code editor**: Snippets de código  
-**Feedback**: Formularios de opinión
-
-## Estilos Base
-
-- **Min height**: `min-h-16` default
-- **Border**: `border-input` con `shadow-xs`
-- **Focus**: `ring-ring/50` con `ring-[3px]`
-- **Padding**: `px-3 py-2`
-- **Font**: `text-base` en móvil, `text-sm` en md+
-- **Field sizing**: `field-sizing-content` para auto-resize
-- **Invalid**: `border-destructive` con `ring-destructive/20`
-
-## Accesibilidad
-
-- ✅ **Label**: Asociar con `htmlFor` e `id`
-- ✅ **ARIA**: `aria-invalid` para errores
-- ✅ **Placeholder**: No usar como label única
-- ✅ **Error messages**: Describir errores claramente
-- ✅ **Keyboard**: Enter, Tab, Shift+Enter funcionan nativamente
-
-## Notas de Implementación
-
-- **HTML nativo**: Wrapper de `<textarea>` HTML nativo
-- **Field sizing**: `field-sizing-content` permite auto-resize basado en contenido
-- **No external library**: Sin dependencias de Radix UI
-- **Data attribute**: `data-slot="textarea"` para identificación
-
-## Troubleshooting
-
-**No auto-resize**: Verifica `field-sizing-content` en className (Chrome 123+)  
-**Resize manual no funciona**: Usa `resize-y`, `resize-both`, o remueve `resize-none`  
-**Height fijo**: Usa prop `rows` para altura específica  
-**Contador de caracteres**: Usa `value.length` y `maxLength`  
-**Enter no funciona en chat**: Usa `onKeyDown` con `e.key === "Enter" && !e.shiftKey`
-
-## Referencias
-
-- **MDN textarea**: <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea>
-- **shadcn/ui Textarea**: <https://ui.shadcn.com/docs/components/textarea>
+# Textarea
+
+Campo de texto multilínea con auto-resize. Wrapper nativo de `<textarea>` HTML.
+
+## Descripción
+
+El componente `Textarea` proporciona un campo de entrada de texto multilínea.
+
+## Importación
+
+```typescript
+import { Textarea } from "@adamosuiteservices/ui/textarea";
+```
+
+## Anatomía
+
+```tsx
+<Textarea placeholder="Type your message here." />
+```
+
+**Componentes**: 1 (Textarea)
+
+## Props
+
+| Prop           | Tipo                       | Descripción                  |
+| -------------- | -------------------------- | ---------------------------- |
+| `placeholder`  | `string`                   | Texto placeholder            |
+| `value`        | `string`                   | Valor controlado             |
+| `defaultValue` | `string`                   | Valor inicial (uncontrolled) |
+| `onChange`     | `(e: ChangeEvent) => void` | Callback al cambiar          |
+| `disabled`     | `boolean`                  | Deshabilita el textarea      |
+| `readOnly`     | `boolean`                  | Solo lectura                 |
+| `required`     | `boolean`                  | Campo requerido              |
+| `rows`         | `number`                   | Número de filas              |
+| `maxLength`    | `number`                   | Longitud máxima              |
+| `className`    | `string`                   | Clases CSS adicionales       |
+
+**Nota**: Acepta todas las props HTML de `<textarea>`
+
+## Patrones de Uso
+
+### Básico
+
+```tsx
+import { Textarea } from "@adamosuiteservices/ui/textarea";
+
+<Textarea placeholder="Type your message here." />;
+```
+
+### Con Label
+
+```tsx
+import { Label } from "@adamosuiteservices/ui/label";
+
+<div className="grid w-full gap-2">
+  <Label htmlFor="message">Your message</Label>
+  <Textarea placeholder="Type your message here." id="message" />
+</div>;
+```
+
+### Controlado con Contador
+
+```tsx
+import { useState } from "react";
+
+function App() {
+  const [value, setValue] = useState("");
+
+  return (
+    <div className="grid w-full gap-2">
+      <Label htmlFor="feedback">
+        Your feedback ({value.length}/500 characters)
+      </Label>
+      <Textarea
+        id="feedback"
+        placeholder="Share your thoughts..."
+        value={value}
+        onChange={(e) => setValue(e.target.value)}
+        maxLength={500}
+      />
+      <div className="flex justify-between text-sm text-muted-foreground">
+        <span>{value.length} characters</span>
+        <span>{500 - value.length} remaining</span>
+      </div>
+    </div>
+  );
+}
+```
+
+### Con Validación
+
+```tsx
+import { Button } from "@adamosuiteservices/ui/button";
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@adamosuiteservices/ui/card";
+
+function CommentForm() {
+  const [comment, setComment] = useState("");
+  const [error, setError] = useState("");
+
+  const handleSubmit = () => {
+    if (comment.trim().length < 10) {
+      setError("Comment must be at least 10 characters long");
+      return;
+    }
+    setError("");
+    // Submit logic
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Leave a Comment</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-2">
+        <Textarea
+          placeholder="What did you think?"
+          value={comment}
+          onChange={(e) => {
+            setComment(e.target.value);
+            if (error) setError("");
+          }}
+          aria-invalid={!!error}
+          rows={4}
+        />
+        {error && <p className="text-destructive text-sm">{error}</p>}
+      </CardContent>
+      <CardFooter>
+        <Button onClick={handleSubmit}>Submit Comment</Button>
+      </CardFooter>
+    </Card>
+  );
+}
+```
+
+### Chat Input con Enter
+
+```tsx
+function ChatInput() {
+  const [message, setMessage] = useState("");
+
+  const handleSend = () => {
+    if (message.trim()) {
+      // Send message logic
+      setMessage("");
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  return (
+    <div className="relative">
+      <Textarea
+        placeholder="Type a message... (Enter to send, Shift+Enter for new line)"
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        onKeyDown={handleKeyDown}
+        rows={3}
+        className="pr-12 resize-none"
+      />
+      <Button
+        size="sm"
+        className="absolute bottom-2 right-2"
+        onClick={handleSend}
+      >
+        Send
+      </Button>
+    </div>
+  );
+}
+```
+
+### Resize Options
+
+```tsx
+// Auto-resize (default con field-sizing-content)
+<Textarea placeholder="Auto-resize..." className="min-h-[80px] resize-none" />
+
+// Manual resize (ambas direcciones)
+<Textarea placeholder="Drag corner to resize..." className="min-h-[80px] resize-both" />
+
+// Vertical resize only
+<Textarea placeholder="Resize vertically..." className="min-h-[80px] resize-y" />
+
+// No resize
+<Textarea placeholder="Fixed size..." rows={4} className="resize-none" />
+```
+
+## Casos de Uso
+
+**Comentarios**: Feedback, reviews, mensajes  
+**Formularios**: Descripción, bio, notas  
+**Chat**: Mensajes multilínea  
+**Code editor**: Snippets de código  
+**Feedback**: Formularios de opinión
+
+## Estilos Base
+
+- **Min height**: `min-h-16` default
+- **Border**: `border-input` con `shadow-xs`
+- **Focus**: `ring-ring/50` con `ring-[3px]`
+- **Padding**: `px-3 py-2`
+- **Font**: `text-base` en móvil, `text-sm` en md+
+- **Field sizing**: `field-sizing-content` para auto-resize
+- **Invalid**: `border-destructive` con `ring-destructive/20`
+
+## Accesibilidad
+
+- ✅ **Label**: Asociar con `htmlFor` e `id`
+- ✅ **ARIA**: `aria-invalid` para errores
+- ✅ **Placeholder**: No usar como label única
+- ✅ **Error messages**: Describir errores claramente
+- ✅ **Keyboard**: Enter, Tab, Shift+Enter funcionan nativamente
+
+## Notas de Implementación
+
+- **HTML nativo**: Wrapper de `<textarea>` HTML nativo
+- **Field sizing**: `field-sizing-content` permite auto-resize basado en contenido
+- **No external library**: Sin dependencias de Radix UI
+- **Data attribute**: `data-slot="textarea"` para identificación
+
+## Troubleshooting
+
+**No auto-resize**: Verifica `field-sizing-content` en className (Chrome 123+)  
+**Resize manual no funciona**: Usa `resize-y`, `resize-both`, o remueve `resize-none`  
+**Height fijo**: Usa prop `rows` para altura específica  
+**Contador de caracteres**: Usa `value.length` y `maxLength`  
+**Enter no funciona en chat**: Usa `onKeyDown` con `e.key === "Enter" && !e.shiftKey`
+
+## Referencias
+
+- **MDN textarea**: <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea>
+- **shadcn/ui Textarea**: <https://ui.shadcn.com/docs/components/textarea>