@adamosuiteservices/ui 1.2.4 → 1.3.5

package/docs/components/ui/tabs.md

@@ -0,0 +1,122 @@
+# Tabs
+
+Pestañas con background. Basado en Radix UI.
+
+## Descripción
+
+El componente `Tabs` permite organizar contenido en secciones que se pueden alternar.
+
+## Importación
+
+```typescript
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from "@adamosuiteservices/ui/tabs";
+```
+
+## Anatomía
+
+```tsx
+<Tabs defaultValue="account">
+  <TabsList>
+    <TabsTrigger value="account">Account</TabsTrigger>
+    <TabsTrigger value="password">Password</TabsTrigger>
+  </TabsList>
+  <TabsContent value="account">Account settings content</TabsContent>
+  <TabsContent value="password">Password settings content</TabsContent>
+</Tabs>
+```
+
+**Componentes**: 4 (Tabs, TabsList, TabsTrigger, TabsContent)
+
+## Props
+
+### Tabs (Root)
+
+| Prop            | Tipo                      | Descripción                |
+| --------------- | ------------------------- | -------------------------- |
+| `defaultValue`  | `string`                  | Tab inicial (uncontrolled) |
+| `value`         | `string`                  | Tab controlado             |
+| `onValueChange` | `(value: string) => void` | Callback al cambiar        |
+
+### TabsTrigger
+
+| Prop       | Tipo      | Descripción         |
+| ---------- | --------- | ------------------- |
+| `value`    | `string`  | Valor único del tab |
+| `disabled` | `boolean` | Deshabilitar tab    |
+
+## Patrones de Uso
+
+### Básico
+
+```tsx
+<Tabs defaultValue="account">
+  <TabsList>
+    <TabsTrigger value="account">Account</TabsTrigger>
+    <TabsTrigger value="password">Password</TabsTrigger>
+  </TabsList>
+  <TabsContent value="account">Account settings content</TabsContent>
+  <TabsContent value="password">Password settings content</TabsContent>
+</Tabs>
+```
+
+### Controlado
+
+```tsx
+const [activeTab, setActiveTab] = useState("overview");
+
+<Tabs value={activeTab} onValueChange={setActiveTab}>
+  <TabsList>
+    <TabsTrigger value="overview">Overview</TabsTrigger>
+    <TabsTrigger value="analytics">Analytics</TabsTrigger>
+  </TabsList>
+  <TabsContent value="overview">Overview content</TabsContent>
+  <TabsContent value="analytics">Analytics content</TabsContent>
+</Tabs>;
+```
+
+### Con Iconos
+
+```tsx
+import { UserIcon, KeyIcon, HomeIcon, SettingsIcon } from "lucide-react";
+
+<TabsList>
+  <TabsTrigger value="home">
+    <HomeIcon />
+    Home
+  </TabsTrigger>
+  <TabsTrigger value="settings">
+    <SettingsIcon />
+    Settings
+  </TabsTrigger>
+  <TabsTrigger value="profile">
+    <UserIcon />
+    Profile
+  </TabsTrigger>
+  <TabsTrigger value="security">
+    <KeyIcon />
+    Security
+  </TabsTrigger>
+</TabsList>;
+```
+
+## Casos de Uso
+
+**Settings**: Secciones de configuración  
+**Navigation**: Navegación por secciones  
+**Data views**: Diferentes vistas de datos
+
+## Estilos Base
+
+- **List**: `bg-muted rounded-lg h-9`
+- **Trigger active**: `bg-primary text-primary-foreground shadow-sm`
+- **Trigger**: `rounded-md px-2 py-1 font-semibold`
+
+## Referencias
+
+- **Radix UI Tabs**: <https://www.radix-ui.com/primitives/docs/components/tabs>
+- **shadcn/ui Tabs**: <https://ui.shadcn.com/docs/components/tabs>

package/docs/components/ui/textarea.md

@@ -0,0 +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>

package/docs/components/ui/toggle.md

@@ -0,0 +1,243 @@
+# Toggle
+
+Botón de dos estados (on/off). Basado en Radix UI con variantes CVA.
+
+## Descripción
+
+El componente `Toggle` es un botón de dos estados (presionado/no presionado).
+
+## Importación
+
+```typescript
+import { Toggle } from "@adamosuiteservices/ui/toggle";
+```
+
+## Anatomía
+
+```tsx
+<Toggle aria-label="Toggle italic">
+  <ItalicIcon />
+</Toggle>
+```
+
+**Componentes**: 1 (Toggle)
+
+## Props
+
+| Prop              | Tipo                         | Descripción                   |
+| ----------------- | ---------------------------- | ----------------------------- |
+| `defaultPressed`  | `boolean`                    | Estado inicial (uncontrolled) |
+| `pressed`         | `boolean`                    | Estado controlado             |
+| `onPressedChange` | `(pressed: boolean) => void` | Callback al cambiar           |
+| `disabled`        | `boolean`                    | Deshabilita el toggle         |
+| `variant`         | `"default" \| "outline"`     | Estilo visual                 |
+| `size`            | `"sm" \| "default" \| "lg"`  | Tamaño del toggle             |
+| `className`       | `string`                     | Clases CSS adicionales        |
+
+## Patrones de Uso
+
+### Básico
+
+```tsx
+import { Toggle } from "@adamosuiteservices/ui/toggle";
+import { ItalicIcon } from "lucide-react";
+
+<Toggle aria-label="Toggle italic">
+  <ItalicIcon />
+</Toggle>;
+```
+
+### Con Texto
+
+```tsx
+<Toggle aria-label="Toggle bold">
+  <BoldIcon />
+  Bold
+</Toggle>
+```
+
+### Variantes
+
+```tsx
+// Default (transparent background)
+<Toggle aria-label="Default">
+  <ItalicIcon />
+</Toggle>
+
+// Outline (con border)
+<Toggle variant="outline" aria-label="Outline">
+  <ItalicIcon />
+</Toggle>
+```
+
+### Tamaños
+
+```tsx
+import { UnderlineIcon } from "lucide-react";
+
+<Toggle size="sm"><UnderlineIcon /></Toggle>
+<Toggle size="default"><UnderlineIcon /></Toggle>
+<Toggle size="lg"><UnderlineIcon /></Toggle>
+```
+
+### Controlado
+
+```tsx
+import { useState } from "react";
+
+function App() {
+  const [isPressed, setIsPressed] = useState(false);
+
+  return (
+    <Toggle
+      pressed={isPressed}
+      onPressedChange={setIsPressed}
+      aria-label="Toggle bold"
+    >
+      <BoldIcon />
+      {isPressed ? "Bold (On)" : "Bold (Off)"}
+    </Toggle>
+  );
+}
+```
+
+### Text Editor Formatting
+
+```tsx
+import { BoldIcon, ItalicIcon, UnderlineIcon } from "lucide-react";
+
+function TextEditor() {
+  const [formatting, setFormatting] = useState({
+    bold: false,
+    italic: false,
+    underline: false,
+  });
+
+  return (
+    <div className="flex gap-1">
+      <Toggle
+        pressed={formatting.bold}
+        onPressedChange={(pressed) =>
+          setFormatting((prev) => ({ ...prev, bold: pressed }))
+        }
+        size="sm"
+      >
+        <BoldIcon />
+      </Toggle>
+      <Toggle
+        pressed={formatting.italic}
+        onPressedChange={(pressed) =>
+          setFormatting((prev) => ({ ...prev, italic: pressed }))
+        }
+        size="sm"
+      >
+        <ItalicIcon />
+      </Toggle>
+      <Toggle
+        pressed={formatting.underline}
+        onPressedChange={(pressed) =>
+          setFormatting((prev) => ({ ...prev, underline: pressed }))
+        }
+        size="sm"
+      >
+        <UnderlineIcon />
+      </Toggle>
+    </div>
+  );
+}
+```
+
+### Media Controls
+
+```tsx
+import { MicIcon, MicOffIcon, VideoIcon, VideoOffIcon } from "lucide-react";
+
+function MediaControls() {
+  const [media, setMedia] = useState({
+    microphone: false,
+    camera: false,
+  });
+
+  return (
+    <div className="flex gap-3">
+      <Toggle
+        pressed={media.microphone}
+        onPressedChange={(pressed) =>
+          setMedia((prev) => ({ ...prev, microphone: pressed }))
+        }
+        variant="outline"
+        className={
+          !media.microphone ? "bg-destructive text-destructive-foreground" : ""
+        }
+      >
+        {media.microphone ? <MicIcon /> : <MicOffIcon />}
+      </Toggle>
+
+      <Toggle
+        pressed={media.camera}
+        onPressedChange={(pressed) =>
+          setMedia((prev) => ({ ...prev, camera: pressed }))
+        }
+        variant="outline"
+        className={
+          !media.camera ? "bg-destructive text-destructive-foreground" : ""
+        }
+      >
+        {media.camera ? <VideoIcon /> : <VideoOffIcon />}
+      </Toggle>
+    </div>
+  );
+}
+```
+
+### Deshabilitado
+
+```tsx
+<Toggle disabled><UnderlineIcon /></Toggle>
+<Toggle disabled defaultPressed><UnderlineIcon /></Toggle>
+```
+
+## Casos de Uso
+
+**Text formatting**: Bold, italic, underline toggles  
+**Media controls**: Mic/camera on/off  
+**View options**: List/grid view toggle  
+**Preferences**: Dark mode, notifications  
+**Filters**: Show/hide options
+
+## Estilos Base
+
+- **Sizes**: `h-8 min-w-8` (sm), `h-9 min-w-9` (default), `h-10 min-w-10` (lg)
+- **State off**: `bg-transparent`
+- **State on**: `bg-accent text-accent-foreground`
+- **Hover**: `bg-muted text-muted-foreground`
+- **Outline**: `border border-input shadow-xs`
+- **Focus**: `ring-ring/50` con `ring-[3px]`
+
+## Accesibilidad
+
+- ✅ **Role**: `role="button"` con `aria-pressed`
+- ✅ **ARIA**: `aria-label` requerido para icon-only
+- ✅ **Keyboard**: Space/Enter para toggle
+- ✅ **State**: Screen readers anuncian pressed/not pressed
+- ✅ **Focus**: Focus ring visible
+
+## Notas de Implementación
+
+- **Radix UI**: Basado en `@radix-ui/react-toggle`
+- **CVA**: Variantes con class-variance-authority
+- **Data state**: `data-state="on|off"` para estilos
+- **Controlled**: Usa `pressed` + `onPressedChange`
+- **Uncontrolled**: Usa `defaultPressed`
+
+## Troubleshooting
+
+**Estado no cambia**: En modo controlado usa `pressed` + `onPressedChange`, no `defaultPressed`  
+**No accesible**: Agrega `aria-label` en toggles solo con iconos  
+**Estilo no actualiza**: Verifica `data-state="on"` aplicado cuando pressed  
+**Variant no funciona**: Usa `variant="outline"` o `variant="default"`
+
+## Referencias
+
+- **Radix UI Toggle**: <https://www.radix-ui.com/primitives/docs/components/toggle>
+- **shadcn/ui Toggle**: <https://ui.shadcn.com/docs/components/toggle>