Files
fn_registry/frontend/functions/ui/popover.md
T
egutierrez 35bcb63300 feat: nuevos componentes UI — accordion, avatar, breadcrumb, checkbox, command, dropdown, pagination, popover, radio, sheet, select, switch, textarea, toast
Componentes React accesibles basados en Radix UI con soporte de temas via CSS variables. Incluye barrel export en index.ts.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 03:23:32 +02:00

1.7 KiB

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, 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 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. Base-UI Popover primitive.
popover
component
ui
interactive
overlay
base-ui
cn_ts_core
false
@base-ui/react/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 (positioner + popup), PopoverClose, PopoverHeader, PopoverTitle, PopoverDescription. El posicionamiento automatico lo maneja Base-UI. Animaciones con data-open/data-closed.