MorphingSearch (Búsqueda Expansible)

Esta sección muestra una vista previa del componente MorphingSearch.

En esta guía presentamos el componente MorphingSearch, un icono que se expande a un campo de entrada con animación de resorte.

Vista Previa

Código

import "@elizabthpazp/intera-ui/dist/globals.css";

import { MorphingSearch } from "@elizabthpazp/intera-ui";

export default function Home() {
  return <MorphingSearch placeholder="Buscar..." onSearch={(v)=> filter(v)} darkMode className="mx-auto" />;
}

Detalles del Componente

El componente MorphingSearch consta de:

  • Un botón circular (48px) con icono de búsqueda.
  • Se expande a min(300px,90vw) con resorte (stiffness:400, damping:30).
  • Campo de entrada con AnimatePresence y botón de limpiar (X), Enter activa onSearch.

Propiedades

Nombre de PropTipoPor DefectoDescripción
placeholderstring"Search anything..."Texto de marcador cuando está expandido.
onSearchfunction(value)=>{}Se ejecuta al pulsar Enter o con el valor actual.
darkModebooleanfalseActiva el estilo en modo oscuro si es true.
classNamestring""Clases adicionales combinadas vía cn().
styleCSSProperties-Estilos en línea.

Características

  • Transformación con resorte vía Framer Motion layout.
  • Responsivo max-w-[90vw] con h-12.
  • Iconos Search/X de Lucide.
  • Ubicación: src/components/interactive/MorphingSearch.jsx.