Files
fn_registry/frontend/functions/ui/popover.md
T
egutierrez 2d108c295a refactor: migrate frontend from shadcn/Tailwind to Mantine v9
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>
2026-04-06 23:46:44 +02:00

1.8 KiB

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, output, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant
name kind lang domain version purity signature description tags uses_functions uses_types returns returns_optional error_type imports output tested tests test_file_path file_path props emits has_state framework variant
popover component ts ui 1.0.0 impure Popover(props: PopoverProps): JSX.Element Contenido flotante posicionado accesible con animaciones. Mantine Popover.
popover
component
ui
interactive
overlay
mantine
false
@mantine/core
react
Componente Popover que renderiza contenido flotante accesible posicionado automáticamente via Mantine Popover false
frontend/functions/ui/popover.tsx
name type required description
open boolean false Estado controlado de apertura
name type required description
defaultOpen boolean false Estado inicial de apertura (no controlado)
name type required description
onOpenChange (open: boolean) => void false Callback cuando cambia el estado de apertura
name type required description
sideOffset number false Distancia en px entre trigger y popover (default: 4)
onOpenChange
false react

Ejemplo

<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.