@adamosuiteservices/ui 2.11.15 → 2.11.17

package/docs/components/ui/tooltip.md

@@ -1,317 +1,317 @@
-# Tooltip
-
-Mensaje flotante informativo en hover/focus. Basado en Radix UI con arrow.
-
-## Descripción
-
-El componente `Tooltip` muestra información adicional al hacer hover sobre un elemento.
-
-## Importación
-
-```typescript
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@adamosuiteservices/ui/tooltip";
-```
-
-## Anatomía
-
-```tsx
-<Tooltip>
-  <TooltipTrigger>Hover me</TooltipTrigger>
-  <TooltipContent>
-    <p>Tooltip content</p>
-  </TooltipContent>
-</Tooltip>
-```
-
-**Componentes**: 4 (TooltipProvider, Tooltip, TooltipTrigger, TooltipContent)
-
-## Props
-
-### Tooltip (Root)
-
-| Prop            | Tipo                      | Descripción                             |
-| --------------- | ------------------------- | --------------------------------------- |
-| `open`          | `boolean`                 | Estado controlado                       |
-| `defaultOpen`   | `boolean`                 | Estado inicial                          |
-| `onOpenChange`  | `(open: boolean) => void` | Callback al cambiar                     |
-| `delayDuration` | `number`                  | Delay antes de mostrar (ms, default: 0) |
-
-### TooltipTrigger
-
-| Prop      | Tipo      | Descripción                  |
-| --------- | --------- | ---------------------------- |
-| `asChild` | `boolean` | Renderiza como child element |
-
-### TooltipContent
-
-| Prop         | Tipo                                     | Descripción                           |
-| ------------ | ---------------------------------------- | ------------------------------------- |
-| `side`       | `"top" \| "right" \| "bottom" \| "left"` | Posición del tooltip                  |
-| `sideOffset` | `number`                                 | Offset desde trigger (px, default: 0) |
-| `align`      | `"start" \| "center" \| "end"`           | Alineación                            |
-| `className`  | `string`                                 | Clases CSS adicionales                |
-
-### TooltipProvider
-
-| Prop            | Tipo     | Descripción                   |
-| --------------- | -------- | ----------------------------- |
-| `delayDuration` | `number` | Delay global (ms, default: 0) |
-
-## Patrones de Uso
-
-### Básico
-
-```tsx
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@adamosuiteservices/ui/tooltip";
-import { Button } from "@adamosuiteservices/ui/button";
-
-<Tooltip>
-  <TooltipTrigger asChild>
-    <Button variant="outline">Hover</Button>
-  </TooltipTrigger>
-  <TooltipContent>
-    <p>Add to library</p>
-  </TooltipContent>
-</Tooltip>;
-```
-
-### Con Icono
-
-```tsx
-import { Icon } from "@adamosuiteservices/ui/icon";
-
-<Tooltip>
-  <TooltipTrigger asChild>
-    <Button variant="outline" size="icon">
-      <Icon symbol="info" className="text-lg" />
-    </Button>
-  </TooltipTrigger>
-  <TooltipContent>
-    <p>More information</p>
-  </TooltipContent>
-</Tooltip>;
-```
-
-### Posiciones
-
-```tsx
-// Top (default)
-<Tooltip>
-  <TooltipTrigger asChild>
-    <Button>Top</Button>
-  </TooltipTrigger>
-  <TooltipContent side="top">
-    <p>Tooltip on top</p>
-  </TooltipContent>
-</Tooltip>
-
-// Right
-<TooltipContent side="right"><p>Tooltip on right</p></TooltipContent>
-
-// Bottom
-<TooltipContent side="bottom"><p>Tooltip on bottom</p></TooltipContent>
-
-// Left
-<TooltipContent side="left"><p>Tooltip on left</p></TooltipContent>
-```
-
-### Con Offset
-
-```tsx
-<Tooltip>
-  <TooltipTrigger asChild>
-    <Button>With Offset</Button>
-  </TooltipTrigger>
-  <TooltipContent sideOffset={10}>
-    <p>10px offset from trigger</p>
-  </TooltipContent>
-</Tooltip>
-```
-
-### Con Delay
-
-```tsx
-<TooltipProvider delayDuration={800}>
-  <Tooltip>
-    <TooltipTrigger asChild>
-      <Button>Slow Tooltip</Button>
-    </TooltipTrigger>
-    <TooltipContent>
-      <p>Appears after 800ms</p>
-    </TooltipContent>
-  </Tooltip>
-</TooltipProvider>
-```
-
-### Con Provider Global
-
-Para múltiples tooltips, usa TooltipProvider:
-
-```tsx
-<TooltipProvider delayDuration={300}>
-  <Tooltip>...</Tooltip>
-  <Tooltip>...</Tooltip>
-</TooltipProvider>
-```
-
-### Action Buttons
-
-```tsx
-<div className="flex gap-2">
-  <Tooltip>
-    <TooltipTrigger asChild>
-      <Button size="icon" variant="outline">
-        <Icon symbol="content_copy" className="text-lg" />
-      </Button>
-    </TooltipTrigger>
-    <TooltipContent>
-      <p>Copy to clipboard</p>
-    </TooltipContent>
-  </Tooltip>
-
-  <Tooltip>
-    <TooltipTrigger asChild>
-      <Button size="icon" variant="outline">
-        <Icon symbol="edit" className="text-lg" />
-      </Button>
-    </TooltipTrigger>
-    <TooltipContent>
-      <p>Edit document</p>
-    </TooltipContent>
-  </Tooltip>
-
-  <Tooltip>
-    <TooltipTrigger asChild>
-      <Button size="icon" variant="outline">
-        <Icon symbol="share" className="text-lg" />
-      </Button>
-    </TooltipTrigger>
-    <TooltipContent>
-      <p>Share with others</p>
-    </TooltipContent>
-  </Tooltip>
-
-  <Tooltip>
-    <TooltipTrigger asChild>
-      <Button size="icon" variant="destructive">
-        <Icon symbol="delete" className="text-lg" />
-      </Button>
-    </TooltipTrigger>
-    <TooltipContent>
-      <p>Delete permanently</p>
-    </TooltipContent>
-  </Tooltip>
-</div>;
-```
-
-### Form Help Icons
-
-```tsx
-import { Label } from "@adamosuiteservices/ui/label";
-import { Input } from "@adamosuiteservices/ui/input";
-
-<div className="space-y-2">
-  <div className="flex items-center gap-2">
-    <Label htmlFor="username">Username</Label>
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Icon symbol="help" className="cursor-help text-lg text-muted-foreground" />
-      </TooltipTrigger>
-      <TooltipContent>
-        <p>
-          Must be 3-20 characters long and contain only letters, numbers, and
-          underscores
-        </p>
-      </TooltipContent>
-    </Tooltip>
-  </div>
-  <Input id="username" placeholder="Enter username" />
-</div>;
-```
-
-### Controlled
-
-```tsx
-import { useState } from "react";
-
-function App() {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <div className="flex items-center gap-4">
-      <Tooltip open={open} onOpenChange={setOpen}>
-        <TooltipTrigger asChild>
-          <Button>Controlled</Button>
-        </TooltipTrigger>
-        <TooltipContent>
-          <p>Controlled programmatically</p>
-        </TooltipContent>
-      </Tooltip>
-
-      <Button size="sm" onClick={() => setOpen(true)}>
-        Show
-      </Button>
-      <Button size="sm" variant="outline" onClick={() => setOpen(false)}>
-        Hide
-      </Button>
-    </div>
-  );
-}
-```
-
-## Casos de Uso
-
-**Icon buttons**: Descripción de acciones  
-**Form help**: Explicar campos de formulario  
-**Status indicators**: Detalles de estados  
-**Truncated text**: Mostrar texto completo  
-**Disabled elements**: Explicar por qué está deshabilitado
-
-## Estilos Base
-
-- **Background**: `bg-primary`
-- **Text**: `text-primary-foreground text-xs`
-- **Padding**: `px-3 py-1.5`
-- **Border radius**: `rounded-md`
-- **Arrow**: `size-2.5` con `bg-primary`
-- **Z-index**: `z-50`
-- **Animation**: Fade + zoom in/out
-
-## Accesibilidad
-
-- ✅ **ARIA**: `aria-describedby` automático
-- ✅ **Keyboard**: Visible en focus del trigger
-- ✅ **Hover**: Aparece en hover
-- ✅ **Focus**: Aparece en focus del trigger
-- ✅ **Escape**: Cierra con Escape key
-
-## Notas de Implementación
-
-- **Radix UI**: Basado en `@radix-ui/react-tooltip`
-- **Portal**: Content se renderiza en portal (fuera del DOM tree)
-- **Arrow**: Incluido automáticamente en TooltipContent
-- **Provider**: Tooltip individual ya incluye TooltipProvider interno
-- **Global Provider**: Usa TooltipProvider para delay global
-
-## Troubleshooting
-
-**Tooltip no aparece**: Verifica que TooltipTrigger tenga `asChild` si es Button/componente  
-**Posición incorrecta**: Usa `side` prop en TooltipContent  
-**Delay muy largo**: Ajusta `delayDuration` en Tooltip o TooltipProvider  
-**Z-index issues**: Tooltip usa `z-50`, puede necesitar ajuste si hay overlays  
-**Arrow no visible**: Arrow incluido por default, verifica estilos no sobrescritos  
-**No se cierra**: Usa Escape key o mouseleave del trigger
-
-## Referencias
-
-- **Radix UI Tooltip**: <https://www.radix-ui.com/primitives/docs/components/tooltip>
-- **shadcn/ui Tooltip**: <https://ui.shadcn.com/docs/components/tooltip>
+# Tooltip
+
+Mensaje flotante informativo en hover/focus. Basado en Radix UI con arrow.
+
+## Descripción
+
+El componente `Tooltip` muestra información adicional al hacer hover sobre un elemento.
+
+## Importación
+
+```typescript
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@adamosuiteservices/ui/tooltip";
+```
+
+## Anatomía
+
+```tsx
+<Tooltip>
+  <TooltipTrigger>Hover me</TooltipTrigger>
+  <TooltipContent>
+    <p>Tooltip content</p>
+  </TooltipContent>
+</Tooltip>
+```
+
+**Componentes**: 4 (TooltipProvider, Tooltip, TooltipTrigger, TooltipContent)
+
+## Props
+
+### Tooltip (Root)
+
+| Prop            | Tipo                      | Descripción                             |
+| --------------- | ------------------------- | --------------------------------------- |
+| `open`          | `boolean`                 | Estado controlado                       |
+| `defaultOpen`   | `boolean`                 | Estado inicial                          |
+| `onOpenChange`  | `(open: boolean) => void` | Callback al cambiar                     |
+| `delayDuration` | `number`                  | Delay antes de mostrar (ms, default: 0) |
+
+### TooltipTrigger
+
+| Prop      | Tipo      | Descripción                  |
+| --------- | --------- | ---------------------------- |
+| `asChild` | `boolean` | Renderiza como child element |
+
+### TooltipContent
+
+| Prop         | Tipo                                     | Descripción                           |
+| ------------ | ---------------------------------------- | ------------------------------------- |
+| `side`       | `"top" \| "right" \| "bottom" \| "left"` | Posición del tooltip                  |
+| `sideOffset` | `number`                                 | Offset desde trigger (px, default: 0) |
+| `align`      | `"start" \| "center" \| "end"`           | Alineación                            |
+| `className`  | `string`                                 | Clases CSS adicionales                |
+
+### TooltipProvider
+
+| Prop            | Tipo     | Descripción                   |
+| --------------- | -------- | ----------------------------- |
+| `delayDuration` | `number` | Delay global (ms, default: 0) |
+
+## Patrones de Uso
+
+### Básico
+
+```tsx
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@adamosuiteservices/ui/tooltip";
+import { Button } from "@adamosuiteservices/ui/button";
+
+<Tooltip>
+  <TooltipTrigger asChild>
+    <Button variant="outline">Hover</Button>
+  </TooltipTrigger>
+  <TooltipContent>
+    <p>Add to library</p>
+  </TooltipContent>
+</Tooltip>;
+```
+
+### Con Icono
+
+```tsx
+import { Icon } from "@adamosuiteservices/ui/icon";
+
+<Tooltip>
+  <TooltipTrigger asChild>
+    <Button variant="outline" size="icon">
+      <Icon symbol="info" className="text-lg" />
+    </Button>
+  </TooltipTrigger>
+  <TooltipContent>
+    <p>More information</p>
+  </TooltipContent>
+</Tooltip>;
+```
+
+### Posiciones
+
+```tsx
+// Top (default)
+<Tooltip>
+  <TooltipTrigger asChild>
+    <Button>Top</Button>
+  </TooltipTrigger>
+  <TooltipContent side="top">
+    <p>Tooltip on top</p>
+  </TooltipContent>
+</Tooltip>
+
+// Right
+<TooltipContent side="right"><p>Tooltip on right</p></TooltipContent>
+
+// Bottom
+<TooltipContent side="bottom"><p>Tooltip on bottom</p></TooltipContent>
+
+// Left
+<TooltipContent side="left"><p>Tooltip on left</p></TooltipContent>
+```
+
+### Con Offset
+
+```tsx
+<Tooltip>
+  <TooltipTrigger asChild>
+    <Button>With Offset</Button>
+  </TooltipTrigger>
+  <TooltipContent sideOffset={10}>
+    <p>10px offset from trigger</p>
+  </TooltipContent>
+</Tooltip>
+```
+
+### Con Delay
+
+```tsx
+<TooltipProvider delayDuration={800}>
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button>Slow Tooltip</Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <p>Appears after 800ms</p>
+    </TooltipContent>
+  </Tooltip>
+</TooltipProvider>
+```
+
+### Con Provider Global
+
+Para múltiples tooltips, usa TooltipProvider:
+
+```tsx
+<TooltipProvider delayDuration={300}>
+  <Tooltip>...</Tooltip>
+  <Tooltip>...</Tooltip>
+</TooltipProvider>
+```
+
+### Action Buttons
+
+```tsx
+<div className="flex gap-2">
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button size="icon" variant="outline">
+        <Icon symbol="content_copy" className="text-lg" />
+      </Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <p>Copy to clipboard</p>
+    </TooltipContent>
+  </Tooltip>
+
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button size="icon" variant="outline">
+        <Icon symbol="edit" className="text-lg" />
+      </Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <p>Edit document</p>
+    </TooltipContent>
+  </Tooltip>
+
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button size="icon" variant="outline">
+        <Icon symbol="share" className="text-lg" />
+      </Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <p>Share with others</p>
+    </TooltipContent>
+  </Tooltip>
+
+  <Tooltip>
+    <TooltipTrigger asChild>
+      <Button size="icon" variant="destructive">
+        <Icon symbol="delete" className="text-lg" />
+      </Button>
+    </TooltipTrigger>
+    <TooltipContent>
+      <p>Delete permanently</p>
+    </TooltipContent>
+  </Tooltip>
+</div>;
+```
+
+### Form Help Icons
+
+```tsx
+import { Label } from "@adamosuiteservices/ui/label";
+import { Input } from "@adamosuiteservices/ui/input";
+
+<div className="space-y-2">
+  <div className="flex items-center gap-2">
+    <Label htmlFor="username">Username</Label>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Icon symbol="help" className="cursor-help text-lg text-muted-foreground" />
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>
+          Must be 3-20 characters long and contain only letters, numbers, and
+          underscores
+        </p>
+      </TooltipContent>
+    </Tooltip>
+  </div>
+  <Input id="username" placeholder="Enter username" />
+</div>;
+```
+
+### Controlled
+
+```tsx
+import { useState } from "react";
+
+function App() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div className="flex items-center gap-4">
+      <Tooltip open={open} onOpenChange={setOpen}>
+        <TooltipTrigger asChild>
+          <Button>Controlled</Button>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>Controlled programmatically</p>
+        </TooltipContent>
+      </Tooltip>
+
+      <Button size="sm" onClick={() => setOpen(true)}>
+        Show
+      </Button>
+      <Button size="sm" variant="outline" onClick={() => setOpen(false)}>
+        Hide
+      </Button>
+    </div>
+  );
+}
+```
+
+## Casos de Uso
+
+**Icon buttons**: Descripción de acciones  
+**Form help**: Explicar campos de formulario  
+**Status indicators**: Detalles de estados  
+**Truncated text**: Mostrar texto completo  
+**Disabled elements**: Explicar por qué está deshabilitado
+
+## Estilos Base
+
+- **Background**: `bg-primary`
+- **Text**: `text-primary-foreground text-xs`
+- **Padding**: `px-3 py-1.5`
+- **Border radius**: `rounded-md`
+- **Arrow**: `size-2.5` con `bg-primary`
+- **Z-index**: `z-50`
+- **Animation**: Fade + zoom in/out
+
+## Accesibilidad
+
+- ✅ **ARIA**: `aria-describedby` automático
+- ✅ **Keyboard**: Visible en focus del trigger
+- ✅ **Hover**: Aparece en hover
+- ✅ **Focus**: Aparece en focus del trigger
+- ✅ **Escape**: Cierra con Escape key
+
+## Notas de Implementación
+
+- **Radix UI**: Basado en `@radix-ui/react-tooltip`
+- **Portal**: Content se renderiza en portal (fuera del DOM tree)
+- **Arrow**: Incluido automáticamente en TooltipContent
+- **Provider**: Tooltip individual ya incluye TooltipProvider interno
+- **Global Provider**: Usa TooltipProvider para delay global
+
+## Troubleshooting
+
+**Tooltip no aparece**: Verifica que TooltipTrigger tenga `asChild` si es Button/componente  
+**Posición incorrecta**: Usa `side` prop en TooltipContent  
+**Delay muy largo**: Ajusta `delayDuration` en Tooltip o TooltipProvider  
+**Z-index issues**: Tooltip usa `z-50`, puede necesitar ajuste si hay overlays  
+**Arrow no visible**: Arrow incluido por default, verifica estilos no sobrescritos  
+**No se cierra**: Usa Escape key o mouseleave del trigger
+
+## Referencias
+
+- **Radix UI Tooltip**: <https://www.radix-ui.com/primitives/docs/components/tooltip>
+- **shadcn/ui Tooltip**: <https://ui.shadcn.com/docs/components/tooltip>