componente · @solu30/ui-kit/feedback

Popover

Panel flotante anclado a un disparador, que se cierra al hacer clic afuera.

Seguir leyendo — 2 párrafos más

Popover compound component with auto-positioning and click-outside dismissal.

Uses CSS variables for theming:

--ui-bg-raised for popover background
--ui-border for border color

79 sitios de import en 7 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

TheCharterPanel
cmp-packages
dietaly
elliot
gestorsalon
luigi
raquetea

El componente, montado

Cargando el espécimen…

Éste es el conjunto completo. Abajo, los mismos casos por separado, cada uno con su código.

Cómo se usa

import { Popover, PopoverContent, PopoverTrigger } from '@solu30/ui-kit/feedback'

<Popover position="top">
  <PopoverTrigger asChild>
    <Button variant="ghost" size="sm">
      Ver el detalle
    </Button>
  </PopoverTrigger>
  <PopoverContent>La seña se acredita a las 48 horas hábiles.</PopoverContent>
</Popover>

Anatomía

Las partes que componen Popover se importan del mismo subpath. Sueltas no significan nada: se montan siempre dentro de su padre.

Popover
├── PopoverContent
└── PopoverTrigger

Props

4 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
open	opcional	`boolean`	Controlled open state
onOpenChange	opcional	`(open: boolean) => void`	Callback when open state changes
position	opcional	`PopoverPosition`	Position relative to trigger
children	sí	`React__default.ReactNode`	Children (must include PopoverTrigger and PopoverContent)

Posiciones

Cuando el contenido adicional pide más espacio o interacción que un tooltip —texto largo, más de una línea— pero no llega a ser un diálogo modal: se abre y se cierra solo, sin bloquear el resto de la pantalla.

Cargando el espécimen…

export function PopoverPosiciones() {
  return (
    <Row>
      {POPOVER_DEMOS.map((demo) => (
        <Popover key={demo.position} position={demo.position}>
          <PopoverTrigger asChild>
            <TriggerButton>{demo.label}</TriggerButton>
          </PopoverTrigger>
          <PopoverContent className="max-w-56 text-xs text-content/70">{demo.content}</PopoverContent>
        </Popover>
      ))}
    </Row>
  )
}

De specimens/feedback.tsx · PopoverPosiciones: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Ejemplo del paquete

<Popover>
  <PopoverTrigger>
    <button>Open</button>
  </PopoverTrigger>
  <PopoverContent>
    <p>Popover content here</p>
  </PopoverContent>
</Popover>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.