LiquidTabBar

export function LiquidTabBarSpecimen() {
  const [ruta, setRuta] = useState('/inicio')

  const items = [
    { id: 'inicio', label: 'Inicio', icon: IconHome, href: '/inicio', accent: 'var(--color-primary)' },
    { id: 'agenda', label: 'Agenda', icon: IconClock, href: '/agenda', accent: 'var(--color-info)' },
    { id: 'equipo', label: 'Equipo', icon: IconTeam, href: '/equipo', accent: 'var(--color-success)' },
    { id: 'cuenta', label: 'Cuenta', icon: IconUser, href: '/cuenta', accent: 'var(--color-warning)' },
  ]

  return (
    <Stage label="LiquidTabBar · cuatro destinos con acento propio — el bead se puede arrastrar" tall>
      <div className="flex flex-col items-center gap-3 px-1 py-1">
        <PhoneFrame className="w-[300px]">
          <div className="flex h-[380px] flex-col overflow-hidden bg-bkg">
            <div className="flex-1 space-y-2 p-3">
              <div className="h-3 w-24 rounded bg-container" />
              <div className="h-20 rounded-lg bg-container" />
              <div className="h-20 rounded-lg bg-container" />
            </div>
            <div className="flex justify-center px-2 pb-3">
              <LiquidTabBar
                items={items}
                currentPath={ruta}
                onSelect={(id) => setRuta(`/${id}`)}
                aria-label="Navegación del panel"
                renderLink={({ href, className, children, ...resto }) => (
                  <span
                    {...resto}
                    role="link"
                    tabIndex={0}
                    className={className}
                    onClick={() => setRuta(href)}
                    onKeyDown={(e) => e.key === 'Enter' && setRuta(href)}
                  >
                    {children}
                  </span>
                )}
              />
            </div>
          </div>
        </PhoneFrame>
        <p className="max-w-[400px] text-center text-[11px] text-content/60">
          Arrastrá el bead a lo largo de la barra: al soltar calza en la pestaña más cercana y la
          elige, igual que un click. El color viaja interpolado entre el acento que deja y el que
          toma. Sin uso real todavía en ningún vertical — la procedencia es ADR-365.
        </p>
      </div>
    </Stage>
  )
}

De specimens/navigation.tsx · LiquidTabBarSpecimen: 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.