egutierrez
2d108c295a
Reescribe todos los componentes UI para usar Mantine v9 en lugar de shadcn/Tailwind. Elimina cn(), CVA, components.json, theme_provider custom y globals.css con Tailwind. Añade 25+ componentes nuevos (AppShell, AuthForm, DatePickerInput, Dropzone, etc.) y MantineProvider como wrapper estándar del sistema de temas. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
67 lines
1.8 KiB
Markdown
67 lines
1.8 KiB
Markdown
---
|
|
name: popover
|
|
kind: component
|
|
lang: ts
|
|
domain: ui
|
|
version: "1.0.0"
|
|
purity: impure
|
|
signature: "Popover(props: PopoverProps): JSX.Element"
|
|
description: "Contenido flotante posicionado accesible con animaciones. Mantine Popover."
|
|
tags: [popover, component, ui, interactive, overlay, mantine]
|
|
uses_functions: []
|
|
uses_types: []
|
|
returns: []
|
|
returns_optional: false
|
|
error_type: ""
|
|
imports: ["@mantine/core", react]
|
|
output: "Componente Popover que renderiza contenido flotante accesible posicionado automáticamente via Mantine Popover"
|
|
tested: false
|
|
tests: []
|
|
test_file_path: ""
|
|
file_path: "frontend/functions/ui/popover.tsx"
|
|
props:
|
|
- name: open
|
|
type: "boolean"
|
|
required: false
|
|
description: "Estado controlado de apertura"
|
|
- name: defaultOpen
|
|
type: "boolean"
|
|
required: false
|
|
description: "Estado inicial de apertura (no controlado)"
|
|
- name: onOpenChange
|
|
type: "(open: boolean) => void"
|
|
required: false
|
|
description: "Callback cuando cambia el estado de apertura"
|
|
- name: sideOffset
|
|
type: "number"
|
|
required: false
|
|
description: "Distancia en px entre trigger y popover (default: 4)"
|
|
emits: [onOpenChange]
|
|
has_state: false
|
|
framework: react
|
|
variant: []
|
|
---
|
|
|
|
## Ejemplo
|
|
|
|
```tsx
|
|
<Popover>
|
|
<PopoverTrigger asChild>
|
|
<Button variant="outline">Abrir</Button>
|
|
</PopoverTrigger>
|
|
<PopoverContent>
|
|
<PopoverHeader>
|
|
<PopoverTitle>Configuracion</PopoverTitle>
|
|
<PopoverDescription>Ajusta tus preferencias.</PopoverDescription>
|
|
</PopoverHeader>
|
|
<div className="mt-4">
|
|
{/* contenido */}
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
```
|
|
|
|
## Notas
|
|
|
|
Compuesto de: Popover (root), PopoverTrigger, PopoverContent, PopoverClose, PopoverHeader, PopoverTitle, PopoverDescription. El posicionamiento automatico lo maneja Mantine Popover. PopoverPortal es un no-op mantenido por compatibilidad.
|